ラジオボタン向けのコードをチェックボックスで使用したい

Question

前提・実現したいこと

ワードプレスでのmw wp formを使った入力フォームについてです。
jqueryを使ってチェックボックスの特定要素のチェックで、テキストや別の入力項目を開閉させたいです。
参考事例があたのですが、ラジオボタン用だったので、チェックボックス用にコードを変更する方法をご教示いただきたいです。

試したこと

以下の参考サイトでラジオボタンを使った参考事例があったので、このコード（jquery,html)のradioをcheckboxに置き換えて試してみましたが動きません。サイトはこちら
元のradioでは動くので、checkboxは同じ記述方法ではだめだと思いました。自力でコードが書けないので、同様の事例を探しましたが、見付けることができませんでした。

ラジオボタン用のコード（これをチェックボックスで使いたい）

jQuery(function($) {
 $('[name="pickup"]:radio').change(function() {
  $(".pickup-op").hide();
  if ($("input:radio[name='pickup']:checked").val() == "1") {
   $('.pickup-op').show();
  } else if($("input:radio[name='pickup']:checked").val() == "2") {
   $("input[name='pickupDate']").val("");
   $("select[name='pickupTime']").val("0");
  }
 }).trigger('change'); 
});

●htmlコードです。

〜 略 〜
<tr>
<th>集荷手配</th>
<td>[mwform_radio name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td>
</tr>
<tr class="pickup-op">
<th>集荷希望日</th>
<td>[mwform_datepicker name="pickupDate" id="pickupDate" js="minDate:3" placeholder="申込日より３日以降で指定できます。"]</td>
</tr>
<tr class="pickup-op">
<th>集荷希望時間</th>
<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>
</tr>
〜 略 〜

※追加【修正したコード１】

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'); 
});

※再追加【修正したコード２】

〜 略 〜
<tr>
<th>集荷手配</th>
<td>[mwform_checkbox name="pickup" id="pickup" value="2" children="1:必要,2:不要"]</td>
</tr>
<tr class="pickup-op">
<th>集荷希望日</th>
<td>[mwform_datepicker name="pickupDate" id="pickupDate" js="minDate:3" placeholder="申込日より３日以降で指定できます。"]</td>
</tr>
<tr class="pickup-op">
<th>集荷希望時間</th>
<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>
</tr>
〜 略 〜

jQuery(function($) {
 $('[name="pickup"]:checkbox').change(function() {
  $(".pickup-op").hide();
 if ($(input:checkbox[name='pickup']).prop('checked').val() == "1"){  
   $('.pickup-op').show();
  } else($(input:checkbox[name='pickup']).prop('checked').val() == "2") {
   $("input[name='pickupDate']").val("");
   $("select[name='pickupTime']").val("0");
  }
 }).trigger('change'); 
});

▼html出力

<label for="pickup-1">
			<input type="checkbox" name="pickup[data][]" value="1" id="pickup-1">
			<span class="mwform-checkbox-field-text">必要</span>
		</label>

Comments

[cerfweb]

チェックボックスを使う理由はどういったことですか。

[bigcat]

返信ありがとうございます。
例えば、チェックボックスで、特定のイベントなどを選択した場合に、食べ物を選択するチェックボックスが開くといった使い方です。

[cerfweb]

つまり、「必要」「不要」の2択の代わりにチェックボックスにチェックが入っているかいないかで処理を分けるということですね。

[bigcat]

ご丁寧にありがとうございます。教えていただいたコードも試してはいたのですが、対象要素の記述が違っているようです。修正したコードを質問に追記しました。

[cerfweb]

回答に追記しましたのでご確認ください。

[bigcat]

ありがとうございます。ただ、ご教示いただいたようにしたのですが、最初から開いたままで、チェックボックスをon,offしても変化がありません。ラジオボタンの場合だと最初は2（不必要）にチェックが入った状態で閉じていて、1にチェックで開きます。
チェックボックスでは、複数選択可で１にチェックが入っている場合に開くようにしたいのですが、.val() == "1"が間違っているのでしょうか。.val() == "1"を外した状態でも変化はありません。

[cerfweb]

ラジオボタン用に書き換えたコード（HTMLとjQuery）をそれぞれ更に追記していただけますか。

[cerfweb]

[mwform_checkbox name="pickup" id="pickup" value="2" children="1:必要,2:不要"]
の部分で実際にどんなhtmlが出力されていますか。
また、「必要」「不要」の2択ならcheckboxではなくradioの方が適していると思うのですがどういう理由でcheckboxにされているのでしょうか。
あと、jQueryのコード if ($(input:checkbox[name='pickup']).prop('checked').val() == "1") の書き方は間違っています。

[bigcat]

すみません、サンプルが紛らわしかったようです。この例を応用して、多数の選択肢の中で１つのイベント等を選択した際、食べ物等を選ぶ、新たなチェックボックスを表示させるのを実現したいと考えていました。
長らくお付き合いいただいたのに申し訳ございません。今回の件は、手に負えそうにないので、別の方法を考えたいと思います。
１つ教えていただけたらありがたいのですが、チェックボックス１を選択したかどうかを判別のコードの記載方法は、 if ($(input:checkbox[name='pickup']).prop('checked').val() == "1") は正しくはどのようにすればよいでしょうか。

[cerfweb]

出力されるHTMLさえわかればjQueryのセレクタの書き方も間違っていないか検証できるのですが・・・
チェックボックス１を選択したかどうかを判別するコードの記載方法は基本的に回答欄に記したとおりです。
あとはセレクタ（具体的には $(input:checkbox[name="pickup"]) と書いている部分）さえ正確に指定できれば動くはずです。

[bigcat]

質問部分に追記しましたが、この内容でよかったでしょうか。

[cerfweb]

はい、その部分ですね。
そこにはjQuery部分の最初の方に書いてある $('[name="pickup"]:checkbox') に該当するものがないので記載されているスクリプトは動きません。その部分だけに限れば$('#pickup-1').change(function(){...});で、クラス名を割り振ることができれば$('クラス名').change(function(){...});のような書き方で発火させられます。

[bigcat]

時間がかかりそうですが、色々調べながらやってみたいと思います。
ご丁寧にありがとうございました。

Answer 1

チェックボックスがチェックされているかどうかの判別は

$(...).prop('checked')

を条件文に使えばできます。...の部分は対象となる要素を指定してください。

チェックされていたら上記コードはtrue、チェックされていなければfalseを返します。
ですので条件文は

if ($(input:checkbox[name='pickup']).prop('checked').val() == "1")

ではなく

if ($(input:checkbox[name="pickup"]).prop('checked')) {
  // チェックされていた時の処理
} else {
  // チェックされていなかった時の処理
}

のようになります。