チェックボックスでフォームの表示項目を変えたい

前提・実現したいこと

フォームの設置に際して「個別相談」「プレゼント」のチェックボックスをチェックしてもらい、
それぞれのチェック項目によって必須項目の表示・非表示をコントロールさせようと思っています。

２つともチェックした場合は「個別相談」+「プレゼント」の条件で反映させたいです。

発生している問題

「個別相談」「プレゼント」のチェックボックスをそれぞれ1つづつチェックした場合はうまく動作しているのですが、２つとも選択した場合にうまく動作しません。

２つチェックしようとすると、最後にチェックした項目の条件が反映されてしまい、
「個別相談」+「プレゼント」の条件になりません。

該当のソースコード

<form class="jqtransform" method="post" action="mail.php" onsubmit="return chkHissu(this)">
<table cellspacing="1" class="tbl-base">
<tbody>

<tr>
<th>お問い合わせ項目　</th>
<td>
<label><input type="checkbox" name="お問い合わせ項目" value="個別相談">個別相談</label><br>
<label><input type="checkbox" name="お問い合わせ項目" value="プレゼント">プレゼント</label>

</td>
</tr>
<tr class="hissuSoudan">
<th>電話番号（半角）<span><img src="images/ico_req.png" alt="必須"></span></th>
<td><input type="text" name="電話番号" size="20" /></td>
</tr>
<tr class="hissuPresent">
<th>送り先住所　<span><img src="images/ico_req.png" alt="必須"></span></th>
<td class="address">
<input class="right" type="text" name="郵便番号" placeholder="郵便番号" onKeyUp="AjaxZip3.zip2addr(this,'','都道府県','市区町村');" size="8" /><br/>
<input type="text" name="都道府県" title="都道府県" placeholder="都道府県" size="30"/><br/>
<input type="text" name="市区町村" title="市区町村" placeholder="市区町村" size="30"/><br/>
<input type="text" name="町名番地" placeholder="町名番地" size="30"/><br/>
<input type="text" name="ビル名・号室" placeholder="ビル名・号室" size="30"/></td>
</tr>
<tr class="hissuSoudan">
<th>ご相談希望日時　<span><img src="images/ico_req.png" alt="必須"></span></th>
<td><input type="text" name="希望日時" size="20" /></td>
</tr>
<tbody>
</table>
<input type="submit" value="下記の内容に同意して申し込む" class="submit" />
</form>

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function() {
2  $('input[name="お問い合わせ項目"]').on('change', function(){
3    if($(this).is('[value=個別相談]')){
4      $('tr.hissuSoudan').toggle($(this).prop('checked'));
5    }
6    if($(this).is('[value=プレゼント]')){
7      $('tr.hissuPresent').toggle($(this).prop('checked'));
8    }
9  }).trigger('change');
10});

もしくは

javascript
1$(function() {
2  $('input[name=お問い合わせ項目]').on('change', function(){
3    $('tr.hissuSoudan').toggle($('input[name=お問い合わせ項目][value=個別相談]').prop('checked'));
4    $('tr.hissuPresent').toggle($('input[name=お問い合わせ項目][value=プレゼント]').prop('checked'));
5  }).eq(0).trigger('change');
6});

投稿2019/02/27 11:24

編集2019/02/27 11:49

yambejp

総合スコア114843

cerfweb

2019/02/27 13:55 編集

補足ですが、name=お問い合わせ項目や value=個別相談は name="お問い合わせ項目"、value="個別相談" とした方がコードに何らかの手を加えた際（例えばnameの値を変えるなどした際）エラーが出にくいと思います。また、<input type="checkbox" name="お問い合わせ項目" ...>は同じnameが2つ以上あると、送信先では最後の値しか受信できませんので、name="お問い合わせ項目[]"とし、JavaScriptの方もそれに伴って書き換えた方がいいかと思われます。現状では、「個別相談」「プレゼント」両方にチェックを入れて必須項目に入力後送信した場合と、一旦「個別相談」「プレゼント」両方にチェックを入れて必須項目に入力後「個別相談」のチェックを外してから送信した場合、送信先で受け取るデータは同じ内容になってしまいます。