stackoom
  简体   繁体   中英

Jquery - Iterate through all checked radio buttons

 原文  2016-02-09 11:03:35  9   7    javascript/ jquery

Question

I have a form which is similar like the one below: 

<form id="myForm">
      Question 1:<br>
      <input type="radio" name="question1" value="Yes"> Yes
      <input type="radio" name="question1" value="No"> No
      <br>
      Question 2:<br>
      <input type="radio" name="question2" value="Yes"> Yes
      <input type="radio" name="question2" value="No"> No
      <br>
      Question 3:<br>
      <input type="radio" name="question3" value="Yes"> Yes
      <input type="radio" name="question3" value="No"> No
      <br>
      <input type="submit" value="Submit" name="submit">
</form>

I want to get all the selected radio button values from all the questions using jQuery and if all values is equal to "yes", it will alert success else it will alert fail.

This is the jQuery I wrote: 

$(document).ready(function(){
   $("#myForm input[type=radio]:checked").each(function() {
       var value = $(this).val();
   });
});

7 answers

solution1
 4 ACCPTED  2016-02-09 11:08:24

You can check if you ever get no with radio checked then result is fail else success.

Live Demo 

result = "success";
$("#myForm input[type=radio]:checked").each(function() {
  if(this.value == "No" && this.checked == true)
  {
     result = "fail";
     return false;
  }
});
alert(result);

solution2
 0  2016-02-09 11:08:35

   $(document).ready(function(){
     var val=1;
       $("#myForm input[type=radio]:checked").each(function() {
            if($(this).val()=="No")
             {
              val=2;
             }
       });

      if(val==1)
      {
        alert("Success !!");
      }
      else{
        alert("Fail ");
      }
    });

solution3
 0  2016-02-09 11:12:35

$(document).ready(function(){
   var no_found=false;
   $("#myForm").submit(function(){
      $(this).find("input[type=radio]:checked").each(function() {
       var value = $(this).val();
       if(value == "No")
           no_found=true;
      });
      if(no_found==false){
       alert("Success");
      } 
      else{
       alert("Fail");
      }
   });
});

solution4
 0  2016-02-09 11:14:30

Use this code: 

 $(function() { $('#myForm').on('submit', function(e) { e.preventDefault(); var total = 0; $('#myForm input[type="radio"]:checked').each(function() { if ($(this).val() == 'Yes') total++; }); if (total == 3) alert("Success"); else alert("Fail"); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myForm"> Question 1: <br> <input type="radio" name="question1" value="Yes" checked>Yes <input type="radio" name="question1" value="No">No <br>Question 2: <br> <input type="radio" name="question2" value="Yes">Yes <input type="radio" name="question2" value="No" checked>No <br>Question 3: <br> <input type="radio" name="question3" value="Yes">Yes <input type="radio" name="question3" value="No" checked>No <br> <input type="submit" value="Submit" name="submit"> </form>

solution5
 0  2016-02-09 11:16:05

Try this code 

$("#myForm").submit(function(){
    var check = "Yes";
    $(this).find("input[type=radio]:checked").each(function() {
     var value = $(this).val();
     if(value == "No")
      check = "No";
    });
    alert(check)
  });

solution6
 0  2016-02-09 11:23:54

You may try this as well:

http://codepen.io/anon/pen/JGeLMx 

$('#myForm input[type="submit"]').on('click', function(e) {

  e.preventDefault();  

  var result = true;  
  $('input[type="radio"]').each( function() {

    var radio = $(this)[0];    
    if ( radio.value === 'Yes' && radio.checked === false )
      result = false;

  });

  if ( result ) {
    alert( 'Success!' );
  } else {
    alert( 'Fail!' );
  }

});

Iterated all the radio buttons and if a single check on 'No' or none is selected at all it will fail, otherwise, it would mean all 'Yes' are checked - success.

solution7
 0  2016-02-09 11:30:27

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>
    $(document).ready(function () {

        $('input[type="radio"]').change(function () {
            var iCountTotal;
            var iCountCkedYes;
            iCountTotal = $('input[type="radio"]').length/2;
            iCountCkedYes = $('input[type="radio"][value="Yes"]:checked').length;
            if (iCountTotal != iCountCkedYes) {
                alert('fail')
            }
            else {
                alert('success')

            }
        });


    });


</script>



<body>

    <form id="myForm">
      Question 1:<br>
      <input type="radio" name="question1" value="Yes" checked="checked"> Yes
      <input type="radio" name="question1" value="No"> No
      <br>
      Question 2:<br>
      <input type="radio" name="question2" value="Yes"> Yes
      <input type="radio" name="question2" value="No" checked="checked"> No
      <br>
      Question 3:<br>
      <input type="radio" name="question3" value="Yes"> Yes
      <input type="radio" name="question3" value="No" checked="checked"> No
      <br>
      <input type="submit" value="Submit" name="submit">
</form>
</html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question checking if all radio buttons are checked in jquery datatables Get values of all checked radio buttons using JQuery Submit all checked radio buttons Check if all radio buttons are checked Checking if all radio buttons are checked jquery radio buttons :checked and $(this).parent iterate through a radio buttons group and get their labels Ensuring that all radio buttons are checked on a page. Find all checked checkboxes and radio buttons How to get the radio buttons that are NOT checked (Jquery)?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM