チェックボックスにチェックをしたらコンテンツ表示させたい

サイトのアンケートで全てのチェックボックスにチェックを付けたら非表示になっているコンテンツを表示させたいです。
やりたい参考サイトはこちらです！
https://fabius.co.jp/refund

こちらのサイトにて他質問者様がしていた内容を参考にさせていただいております。
現在テスト的に作成しており、ソースなどそのまま使用させていただいる部分があることご了承のほどよろしくお願いします。
（参照元URL：https://teratail.com/questions/11021）

参照させていただいた内容は全てチェックし、ボタンをクリックするとアラートが表示されるといった内容ですが、今回は全てチェックした時点で非表示になっていたコンテンツを表示させる実装をしたいと考えております。

$(function() {
$('#checkBtn').click(function(){

この部分はボタンクリックするイベントでもないし、むしろ今回はボタンは不要なので違うのかなと思い調べながらやってみたのですがうまくいかずこちらにご質問させていただきました、

どなたかのお知恵をお借りできれば幸いです。
何卒よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>checkbox</title>
6<style type="text/css">
7	#thanks{
8		display: none;
9	}
10</style>
11<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
12<script>
13$(function() {
14    $('#checkBtn').click(function(){
15        if ( $("input[type=checkbox]:not(:checked)").size() == 0 ) {
16            document.getElementById('thanks').style.display = 'block';
17        }
18    });
19} );
20</script>
21
22</head>
23<body>
24<div id="allWrap">
25	<input type="checkbox" id="check1" name="checksample" value="1"> 
26	<label for="check1">チェックボックス１</label><br />
27	<input type="checkbox" id="check2" name="checksample" value="2"> 
28	<label for="check2">チェックボックス２</label><br />
29	<input type="checkbox" id="check3" name="checksample" value="3"> 
30	<label for="check3">チェックボックス３</label> <br />
31	<input type="checkbox" id="check4" name="checksample" value="4"> 
32	<label for="check4">チェックボックス４</label><br /> 
33	<input type="checkbox" id="check5" name="checksample" value="5"> 
34	<label for="check5">チェックボックス５</label><br /> 
35	<input type="checkbox" id="check6" name="checksample" value="6"> 
36	<label for="check6">チェックボックス６</label><br />
37</div>
38<hr />
39<input type="button" id="checkBtn" value="すべてチェックされていますか？" />
40<p id="thanks">全てチェックしたら表示される</p>
41</body>
42</html>

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

回答3件

現状のコードのボタンのクリックを、チェックボックスのクリックに変更したらいいだけでしょう。

$('#checkBtn').click(function(){
↓
$('#allWrap input[type=checkbox]').click(function(){

ただし、いったんすべてチェックしてから、チェックを外したときは、消えたほうがいいと思いますので、

js
1<html>
2<head>
3    <meta charset="UTF-8">
4    <title>checkbox</title>
5    <style type="text/css">
6        #thanks {
7            display: none;
8        }
9    </style>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11    <script>
12        $(function () {
13            var chk = $('#allWrap input[type=checkbox]');
14            $('#allWrap input[type=checkbox]').click(function () {
15                if ($("#allWrap input[type=checkbox]:not(:checked)").length == 0) {
16                    $('#thanks').show();
17                } else {
18                    $('#thanks').hide();
19                }
20            });
21        });
22    </script>
23</head>
24
25<body>
26    <div id="allWrap">
27        <input type="checkbox" id="check1" name="checksample" value="1">
28        <label for="check1">チェックボックス１</label><br />
29        <input type="checkbox" id="check2" name="checksample" value="2">
30        <label for="check2">チェックボックス２</label><br />
31        <input type="checkbox" id="check3" name="checksample" value="3">
32        <label for="check3">チェックボックス３</label> <br />
33        <input type="checkbox" id="check4" name="checksample" value="4">
34        <label for="check4">チェックボックス４</label><br />
35        <input type="checkbox" id="check5" name="checksample" value="5">
36        <label for="check5">チェックボックス５</label><br />
37        <input type="checkbox" id="check6" name="checksample" value="6">
38        <label for="check6">チェックボックス６</label><br />
39    </div>
40    <hr />
41    <p id="thanks">全てチェックしたら表示される</p>
42</body>
43</html>
44

投稿2021/04/20 14:53

hatena19

総合スコア33715

tantalus

2021/04/21 00:14

hatena19様コードまでいただきましてありがとうございます！実装することができました！ $('#allWrap input[type=checkbox]').click(function(){ コードにするとこういった記述になるんですね！とても勉強になります。今回ご教授いただきましてありがとうございました！

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

ベストアンサー

少し気になって色々調べた結果、もっと簡単に実装できました：）
せっかくなので良ければ使ってください。

<script>
  $(function(){
      $('input[name="checksample"]').change(function(){

        if ( $("input[name=checksample]:not(:checked)").size() == 0 ) {
            
          document.getElementById('thanks').style.display = 'block';

        } else{

          console.log("check確認");
          document.getElementById('thanks').style.display = 'none';
        }
      });
  });
</script>

html上にあるinputのnameがsamplecheckのcheckboxに対してチェックを行なった際に
html上にあるinputのnameがsamplecheckのcheckboxが全て選択済か確認し、
全て選択済の場合はtrueでidがthanksのものにcssでdisplayをblocknにし表示。
そうでない場合はcssでdisplayをnoneにし非表示にしています。
console.logは不要なので消してください。

投稿2021/04/20 14:51

編集2021/04/20 14:56

TakuF

総合スコア41

tantalus

2021/04/21 00:17

TakuF様参考URLまでいただいてしまってありがとうございます…！とても助かりますし、いただきました実装方法でもできました！！！とてもありがとうございます！！詳細な説明もしていただきまして理解できました。今回色々と丁寧に教えていただけたのでベストアンサーとさせてください。本当にありがとうございました。またなにかあったらよろしくお願いします！

TakuF

2021/04/21 14:26

他の方が記述してくれていますが、 jQueryには.show()と.hide()という便利な関数が用意されているそうです。これらを使うともっと綺麗になるのでせっかくjQueryを使っているのであれば使いましょう：）良きエンジニアライフを！

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

私だったらですが、
表示させたい部分をdisplay: none；で非表示にしておき
"checkboxにチェックが入ったら"動く関数Aと
"checkboxにチェックが入っているかを確認し、全てチェックが入っていたらtrueをreturn"する関数Bを作成し
関数Aの中で関数Bを呼び、返却値がtrueだった場合はcssを当て直し画面上に表示させます。

回答になっていなければすみません。

投稿2021/04/20 14:07

TakuF

総合スコア41

tantalus

2021/04/20 14:22

早速のご回答ありがとうございます！私の理解が追いついていないので大変申し訳無く思っておりまして、、、いただけた内容で解決しそうな感じもするのですが実装するに知識がなく、教えていただけた内容をさらに調べて組み合わせてみてできたらと思います！また他に方法などあった場合ご教授いただけますと幸いです。

TakuF

2021/04/20 14:35

実装方法についての質問かと思い、雑な回答しちゃいました。すみません。 jQueryでの表示非表示について https://www.task-notes.com/entry/20150112/1420994026 jQuery × チェックボックスのあれこれ https://kinocolog.com/jquery_checkbox/ これで実装できそうですかね？

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

あなたの回答