contact-form7のプラグインでチェックボックスのカスタマイズがしたい

WordpressでContact-form7というプラグインを使っています。チェックボックスの項目を作ったのですが、使う人によっては、選択する項目が沢山あるので、「一括選択」という項目が作れないか悩んでいます。

現在）好きな食べ物　□りんご　□バナナ　□みかん　□メロン
希望）好きな食べ物　□全部　□りんご　□バナナ　□みかん　□メロン　
＞全部にチェックをつけると、自動的に他のものにもチェックが入る。
＞出来れば、その後にやっぱり「全部」のチェックを外した場合は、今度は全部のチェックが一気に外れて欲しい

No.1 ベストアンサー 回答者： bx2 回答日時： 2021/05/22 18:19

JavaScript(jQuery)で書けばできます。

もっと、スッキリした書き方もできると思いますが。

<script type="text/javascript">
$(function(){
$('input[type="checkbox"][value="全部"]').change(function(){
$('input[type="checkbox"][value="りんご"]').prop('checked', $(this).prop('checked'));
$('input[type="checkbox"][value="バナナ"]').prop('checked', $(this).prop('checked'));
$('input[type="checkbox"][value="みかん"]').prop('checked', $(this).prop('checked'));
$('input[type="checkbox"][value="メロン"]').prop('checked', $(this).prop('checked'));
});

$('input[type="checkbox"][value="りんご"],input[type="checkbox"][value="バナナ"],input[type="checkbox"][value="みかん"]input[type="checkbox"][value="メロン"]').change(function(){
if(!$(this).prop('checked')){
$('input[type="checkbox"][value="全部"]').prop('checked', false);
}
});
});
</script>

この回答へのお礼

ありがとうございます。やってみます

お礼日時：2021/05/22 18:28