チェックボックスにチェックがされていたらOKマークを出す

Question

#実現したいこと
チェックボックスにチェックがされていたら[OK]を出し、チェックが外れたら[OK]を外したい
1つでもチェックされていたら[OK]、チェックは何個しても[OK]を出したいです

#発生している問題
チェックをしたら[OK]は出るが、チェックを外した場合に[OK]が消えません。

#該当のソースコード

 $(function(){
   $('#output').hide();
   $('input[name="form1"]').change(function() {
     var test = $('input[name="form1"]:checked');
     $(test).map(function(){
     if(!test.val() === 'on'){
       $('#output').hide();
     } else {
       $('#output').show();
     }});
    });
  });

<form name="form" >
  <input name="form1" type="checkbox" /><label for="Checkbox1">チェック項目1</label><br />
  <input name="form1" type="checkbox" /><label for="Checkbox2">チェック項目2</label><br />
  <input name="form1" type="checkbox" /><label for="Checkbox3">チェック項目3</label><br />
</form>
<div id="output">[OK]</div>

Comments

[yambejp]

１個でもチェックされたらなのか、全部チェックされたらなのかによりますね

[wshielDi]

１個でもチェックされたら[OK]を出したいです。

Answer 1

チェックしているチェックボックスを対象にしていますね。

var test = $('input[name="form1"]:checked');

チェックボックスを対象としましょう。

Comments

[wshielDi]

var test = $('input[name="form1"]');
$(test).map(function(){
if(test.checked === false){
$('#output').hide();
} else {
$('#output').show();
}});
});

にしてみましたが、[OK]は消えませんでした。コードの記載ミス等でしょうか。

Answer 2

条件が微妙ですがこんな感じでやってみてください

Comments

[yambejp]

<script>
$(function(){
$('#output').hide();
$('[name=form1]').on('change',function(){
var flg=$(this).closest('form').has('[name=form1]:checked').length>0;
$('#output').toggle(flg);
});
});
</script>
<form name="form">
<label><input name="form1" type="checkbox">チェック項目1</label><br>
<label><input name="form1" type="checkbox">チェック項目2</label><br>
<label><input name="form1" type="checkbox">チェック項目3</label><br>
</form>
<div id="output">[OK]</div>

[m.ts10806]

いっそcodepenとか外部サービス利用されては…
コメントで埋もれるのは勿体ない

[wshielDi]

こちらのコードで思い通りの動きになりました。
lengthで要素の数を取得して、toggleを使うんですね！
勉強になりました！ありがとうございます

Answer 3

changeの直後で常にhide実行してonのときだけshowするようにしておけば分岐も減りますしコードも見やすくなるのではと。