最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Jquery - Iterate through all checked radio buttons - Stack Overflow

programmeradmin3浏览0评论

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();
   });
});

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();
   });
});
Share Improve this question edited Feb 9, 2016 at 11:35 Radu 1,06612 silver badges35 bronze badges asked Feb 9, 2016 at 11:03 Nas AtchiaNas Atchia 4073 gold badges7 silver badges14 bronze badges 5
  • so what is the issue? – Bhushan Kawadkar Commented Feb 9, 2016 at 11:04
  • is this a demo mate?what is the problem? – guradio Commented Feb 9, 2016 at 11:04
  • 1 first you have radio buttons not checkboxes – Radu Commented Feb 9, 2016 at 11:07
  • @Radu i didnt even notice that :) – guradio Commented Feb 9, 2016 at 11:08
  • The code in your question of the running loop on all radio type button saves my life. I am looking for this quite for two days. – saad siddiqui Commented Nov 30, 2018 at 8:06
Add a comment  | 

7 Answers 7

Reset to default 9

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);  
   $(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 ");
      }
    });
$(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");
      }
   });
});

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>

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)
  });

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.

<!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>
发布评论

评论列表(0)

  1. 暂无评论