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

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

[手順]

1. divタグ(なんでも良い)で複数のチェックボックスをまとめる(html)
2. submitしたら、警告する(jquery)
3. チェック数をカウントする変数を作成(jquery)
4. チェック数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とか気をつける。