12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

複数のラジオボタンに全てチェックが入っているかでバリデーションするJquery

Last updated at Posted at 2014-10-18
js

$(function () {
   //チェックされているラジオボタンの数を数える
   var $checked_radio_count = $(".radio_button_wrapper").find('input[type="radio"]:checked').size();
   //ラジオボタンが入っているdivの数を数える
   var $radio_count = $(".radio_button_wrapper").size();

   //送信ボタンを押したときにバリデーション
   $(".submit_button").click(function(){
      if($checked_radio_count != $radio_count){
      alert("ラジオボタンが全てチェックされていません");
      return false;
      }
   }
});
html
<!--2種類のラジオボタン-->
<div class="radio_button_wrapper">
   <input id="marriage_1" name="marriage" type="radio" value="1">
   <label for="marriage_1"> 結婚していない</label><br>
   <input id="marriage_2" name="marriage" type="radio" value="2">
   <label for="marriage_2"> 結婚している</label>
</div>

<div class="radio_button_wrapper">
   <input id="gender_1" name="gender" type="radio" value="1">
   <label for="gender_1"> 男</label><br>
   <input id="gender_2" name="gender" type="radio" value="2">
   <label for="gender_2"> 女</label>
</div>

<!--送信ボタン-->
<button type="submit" class="submit_button">送信する</button>
12
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?