前提・実現したいこと
ワードプレスでのmw wp formを使った入力フォームについてです。
jqueryを使ってチェックボックスの特定要素のチェックで、テキストや別の入力項目を開閉させたいです。
参考事例があたのですが、ラジオボタン用だったので、チェックボックス用にコードを変更する方法をご教示いただきたいです。
試したこと
以下の参考サイトでラジオボタンを使った参考事例があったので、このコード(jquery,html)のradioをcheckboxに置き換えて試してみましたが動きません。サイトはこちら
元のradioでは動くので、checkboxは同じ記述方法ではだめだと思いました。自力でコードが書けないので、同様の事例を探しましたが、見付けることができませんでした。
ラジオボタン用のコード(これをチェックボックスで使いたい)
jQuery
1jQuery(function($) { 2 $('[name="pickup"]:radio').change(function() { 3 $(".pickup-op").hide(); 4 if ($("input:radio[name='pickup']:checked").val() == "1") { 5 $('.pickup-op').show(); 6 } else if($("input:radio[name='pickup']:checked").val() == "2") { 7 $("input[name='pickupDate']").val(""); 8 $("select[name='pickupTime']").val("0"); 9 } 10 }).trigger('change'); 11}); 12
●htmlコードです。
html
1 2〜 略 〜 3<tr> 4<th>集荷手配</th> 5<td>[mwform_radio name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td> 6</tr> 7<tr class="pickup-op"> 8<th>集荷希望日</th> 9<td>[mwform_datepicker name="pickupDate" id="pickupDate" js="minDate:3" placeholder="申込日より3日以降で指定できます。"]</td> 10</tr> 11<tr class="pickup-op"> 12<th>集荷希望時間</th> 13<td>[mwform_select name="pickupTime" id="pickupTime" children="0:指定なし,1:〜13:00,2:14:00〜16:00,3:16:00〜18:00,4:18:00〜21:00"]</td> 14</tr> 15〜 略 〜
※追加【修正したコード1】
jQuery(function($) { $('[name="pickup"]:checkbox').change(function() { $(".pickup-op").hide(); if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){ $('.pickup-op').show(); } else if($(input:checkbox[name='pickup']).prop('checked').val() == "2") { $("input[name='pickupDate']").val(""); $("select[name='pickupTime']").val("0"); } }).trigger('change'); });
※再追加【修正したコード2】
html
1 2〜 略 〜 3<tr> 4<th>集荷手配</th> 5<td>[mwform_checkbox name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td> 6</tr> 7<tr class="pickup-op"> 8<th>集荷希望日</th> 9<td>[mwform_datepicker name="pickupDate" id="pickupDate" js="minDate:3" placeholder="申込日より3日以降で指定できます。"]</td> 10</tr> 11<tr class="pickup-op"> 12<th>集荷希望時間</th> 13<td>[mwform_select name="pickupTime" id="pickupTime" children="0:指定なし,1:〜13:00,2:14:00〜16:00,3:16:00〜18:00,4:18:00〜21:00"]</td> 14</tr> 15〜 略 〜
jquery
1jQuery(function($) { 2 $('[name="pickup"]:checkbox').change(function() { 3 $(".pickup-op").hide(); 4 if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){ 5 $('.pickup-op').show(); 6 } else($(input:checkbox[name='pickup']).prop('checked').val() == "2") { 7 $("input[name='pickupDate']").val(""); 8 $("select[name='pickupTime']").val("0"); 9 } 10 }).trigger('change'); 11});
▼html出力
html
1<label for="pickup-1"> 2 <input type="checkbox" name="pickup[data][]" value="1" id="pickup-1"> 3 <span class="mwform-checkbox-field-text">必要</span> 4 </label>
回答1件
あなたの回答
tips
プレビュー