代码之家 › 专栏 › 技术社区 › Abdus Sattar Bhuiyan

如何检测多个无线电输入是否选择了一个无线电输入?

jquery

Abdus Sattar Bhuiyan · 技术社区 · 9 年前

<html>

<head>
  <title>jquery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.registerBtn').on({
        click: function(evnt) {

          $('input[type=radio]').each(function() {
            if (!$(this).is(':checked')) {
              var CLASS = $(this).parent().parent().css({
                'background': 'red'
              });
              console.log(CLASS);
            }


          });
          evnt.preventDefault();
          var radioInput = $(".required:checked").val();
          console.log(radioInput);
        }
      });
    });
  </script>

</head>

<body>
  <form action="#">
    <div class="form-group">
      <div class="small">
        <input type="radio" name="sex" value="Male" class="required"> Male
      </div>

      <div class="small">
        <input type="radio" name="sex" value="Female" class="required"> Female
      </div>

    </div>

    <div class="form-group">

      <div class="small">
        <input type="radio" name="abc" value="Male" class="required"> text1
      </div>

      <div class="small">
        <input type="radio" name="abc" value="Female" class="required"> text2
      </div>

    </div>



    <input type="submit" value="Submit" class="registerBtn">
  </form>


</body>

</html>

5 回复 | 直到 9 年前

Code Spy 9 年前

我们可以使用jquery

演示 https://jsfiddle.net/ipsjolly/4boh061y/

           <form action="#">
                <div class="form-group">
                    <div class="small">
                        <input type="radio" name="sex" value="Male" class="required"> Male
                    </div>
                    <div class="small">
                        <input type="radio" name="sex" value="Female" class="required"> Female
                    </div>
                </div>
                <div class="form-group">
                    <div class="small">
                        <input type="radio" name="abc" value="Male" class="required"> text1
                    </div>
                    <div class="small">
                        <input type="radio" name="abc" value="Female" class="required"> text2
                    </div>
                </div>
                <input type="submit" value="Submit" class="registerBtn">
            </form>

JQuery

                $(document).ready(function(){
                 $('.registerBtn').on({
                    click: function(evnt){


                        $(".form-group").each(function(){
                            if($(this).find("input:radio:checked").length){
                                $(this).css({'background':'white'});
                                alert($(this).find("input:radio:checked").val());
                            }else{
                                $(this).css({'background':'red'});
                            }

                        }); 
                      evnt.preventDefault();
                    }
               });
            });

eddy abikhalil 9 年前

我不知道这是否正确,但我认为您正在检查输入类型,对于这两个部分,您都有输入类型收音机,因此我认为您选择使用如下输入名称检查:

$('input[name=sex]').each(function(){
         if(!$(this).is(':checked')){
           var CLASS = $(this).parent().parent().css({'background':'red'});
           console.log(CLASS);
         }
 $('input[name=abc]').each(function(){
         if(!$(this).is(':checked')){
           var CLASS = $(this).parent().parent().css({'background':'red'});
           console.log(CLASS);

Carlos Ferreira 9 年前

因为您使用的是jQuery,所以不需要迭代每个成员

 $('input[type=radio]').each

$('input[type=radio]:checked')

所有内容均为红色,因为两个组的名称相同,它们应具有单独的表单名称,或使用选择器仅选择第一个表单组(不推荐):

$('div.form-group:first input[type=radio]:checked').parent().css({'background':'red'});

你可以检查完整的解决方案 here

Bhargav Chudasama 9 年前

尝试此代码

$(this).parent().parent().css() 到 $('input:radio:checked').parent().parent().css()

$(document).ready(function() {
  $('.registerBtn').on({
    click: function(evnt) {

      $('input[type=radio]').each(function() {
        if (!$(this).is(':checked')) {
          var CLASS = $('input:radio:checked').parent().parent().css({
            'background': 'red'
          });
          console.log(CLASS);
        }
      });
      evnt.preventDefault();
      var radioInput = $('input:radio:checked').val();
      console.log(radioInput);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div class="form-group">
    <div class="small">
      <input type="radio" name="sex" value="Male" class="required"> Male
    </div>

    <div class="small">
      <input type="radio" name="sex" value="Female" class="required"> Female
    </div>

  </div>

  <div class="form-group">

    <div class="small">
      <input type="radio" name="abc" value="text1" class="required"> text1
    </div>

    <div class="small">
      <input type="radio" name="abc" value="text2" class="required"> text2
    </div>

  </div>



  <input type="submit" value="Submit" class="registerBtn">
</form>

Neeraj Pathak 9 年前

试试这个:

$(document).ready(function() {
      $('.registerBtn').on({
        click: function(evnt) {

          $('.form-group input[type=radio]').each(function() {
            if (!$(this).is(':checked')) {
              var CLASS = $(this).parent().css({
                'background': 'red'
              });
            }
            else
            {
            $(this).parent().css({
                'background': 'white'
              });
            }
          });
          evnt.preventDefault();
          var radioInput = $(".required:checked").val();
        }
      });
    });

<html>

<head>
  <title>jquery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <form action="#">
    <div class="form-group" >
      <div class="small">
        <input type="radio" name="sex" value="Male" class="required"> Male
      </div>

      <div class="small">
        <input type="radio" name="sex" value="Female" class="required"> Female
      </div>

    </div>

    <div class="form-group">

      <div class="small">
        <input type="radio" name="abc" value="Male" class="required"> text1
      </div>

      <div class="small">
        <input type="radio" name="abc" value="Female" class="required"> text2
      </div>

    </div>



    <input type="submit" value="Submit" class="registerBtn">
  </form>


</body>

</html>