[jquery]複数のチェックボックスで、一つも選択されてなかったらアラートを出す。

複数のチェックボックスが存在し、ひとつもチェックついていなかったら送信されずに、アラートを出す方法。

[手順]
1. divタグ(なんでも良い)で複数のチェックボックスをまとめる(html)
2. submitしたら、警告する(jquery)
1. チェック数をカウントする変数を作成(jquery)
3. チェック数0だったら、警告とsubmitしないようにする(jquery)

1. divタグで複数のチェックボックスをまとめる(html)

<div class='div_class'>
    <input type='checkbox' name='hello' value='1'>
    <input type='checkbox' name='hello' value='2'>
    <input type='submit'>
</div>

2. submitしたら警告する(jquery)

// step2
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
  <script>

  $(function(){
    $('.submit').click(function(){
        alert('チェックしとらんぞ。');
    });
  });

// step2


  </script>

3. チェック数をカウントする変数を作成(jquery)

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
  <script>



 $(function(){
    $('.submit').click(function(){

    // step3
    var check_count = $('.div_class :checked').length;
    // step3

        alert('チェックしとらんぞ。');
    });
 });



</script>

こんだけ。
divタグやformタグなどでcheckboxタグをくくらないとできないので、注意。

4. チェック数に応じた条件分岐作成(jquery)

  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
  <script>



 $(function(){
    $('.submit').click(function(){
    var check_count = $('.div_class :checked').length;


    // step4
    if (check_count == 0 ){

        alert('チェックしとらんぞ。');

        return false;
    }
    // step4

    });
 });


</script>

まとめ

<div class='div_class'>
    <input type='checkbox' name='hello' value='1'>
    <input type='checkbox' name='hello' value='2'>
    <input type='submit' class='send'>
</div>


  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
  <script>



 $(function(){
  $('.send').click(function(){
    var check_count = $('.div_class :checked').length;
    if (check_count == 0 ){
      alert('チェックしとらんぞ。')
      return false;
    }
  });
});


</script>

jquery初心者にとっては繊細、括弧の過不足とかclassとかidとか気をつける。