javascript - How can I count the number of radio boxes selected and validate? - Stack Overflow

admin管理员组

文章数量:1405359

So here's what my code does:

it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.

Here is an example of the code:

HTML:

 <form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
 <input type="radio" id="button" value="first_button" name="1" />
 <input type="radio" id="button" value="second_button" name="1" />
 <input type="radio" id="button" value="first_button" name="2" />
 <input type="radio" id="button" value="second_button" name="2" />
 <input type="radio" id="button" value="first_button" name="3" />
 <input type="radio" id="button" value="second_button" name="3" />
 <input type="radio" id="button" value="first_button" name="4" />
 <input type="radio" id="button" value="second_button" name="4" />
 <input type="radio" id="button" value="first_button" name="5" />
 <input type="radio" id="button" value="second_button" name="5" />
 <input type="radio" id="button" value="first_button" name="6" />
 <input type="radio" id="button" value="second_button" name="6" />
 <input type="radio" id="button" value="first_button" name="7" />
 <input type="radio" id="button" value="second_button" name="7" />
 <input type="radio" id="button" value="first_button" name="8" />
 <input type="radio" id="button" value="second_button" name="9" />
 <input type="radio" id="button" value="first_button" name="9" />
 <input type="radio" id="button" value="second_button" name="9" />
 <input type="radio" id="button" value="first_button" name="10" />
 <input type="radio" id="button" value="second_button" name="10" />
 </form>

JAVASCRIPT

 function Validation()
 {
 var bol2 = $("input:radio:checked").length;
 if (bol2<=4)
   {
   alert("Please select 5 buttons");
   return false;
   }
 }

The code now works. Thanks @Climbage, I looked at other code and figured out what to do

So here's what my code does:

it displays 10 sets of radio buttons, each with 2 options. (so 20 radio buttons total). The 10 sets all have different names, but are within the same form. A person can only choose 5 buttons out of the 10. I have a piece of code that disables the radio buttons once 5 are selected. Now I want to prevent people from submitting the form if 4 or less buttons are selected.

Here is an example of the code:

HTML:

 <form method="post" action="index.php" name="buttons" onsubmit="return Validation()">
 <input type="radio" id="button" value="first_button" name="1" />
 <input type="radio" id="button" value="second_button" name="1" />
 <input type="radio" id="button" value="first_button" name="2" />
 <input type="radio" id="button" value="second_button" name="2" />
 <input type="radio" id="button" value="first_button" name="3" />
 <input type="radio" id="button" value="second_button" name="3" />
 <input type="radio" id="button" value="first_button" name="4" />
 <input type="radio" id="button" value="second_button" name="4" />
 <input type="radio" id="button" value="first_button" name="5" />
 <input type="radio" id="button" value="second_button" name="5" />
 <input type="radio" id="button" value="first_button" name="6" />
 <input type="radio" id="button" value="second_button" name="6" />
 <input type="radio" id="button" value="first_button" name="7" />
 <input type="radio" id="button" value="second_button" name="7" />
 <input type="radio" id="button" value="first_button" name="8" />
 <input type="radio" id="button" value="second_button" name="9" />
 <input type="radio" id="button" value="first_button" name="9" />
 <input type="radio" id="button" value="second_button" name="9" />
 <input type="radio" id="button" value="first_button" name="10" />
 <input type="radio" id="button" value="second_button" name="10" />
 </form>

JAVASCRIPT

 function Validation()
 {
 var bol2 = $("input:radio:checked").length;
 if (bol2<=4)
   {
   alert("Please select 5 buttons");
   return false;
   }
 }

The code now works. Thanks @Climbage, I looked at other code and figured out what to do

• javascript
• validation

Share Improve this question Follow edited Jul 13, 2012 at 17:11 user1470755 asked Jul 13, 2012 at 16:36 user1470755user1470755 4111 gold badge22 silver badges66 bronze badges 12

• 4 You cannot use the same id for all of them. Id attributes must be unique to each page. – Michael Berkowski Commented Jul 13, 2012 at 16:38
• Wait so you already have code that disables the buttons when 5 are selected? Can you reuse that? – Mike Park Commented Jul 13, 2012 at 16:40
• for each of the button, add a onclick= {counter++} method, and use the count to validate – roymustang86 Commented Jul 13, 2012 at 16:42
• @roymustang86 : This doesn't do that OP wants – Ortiga Commented Jul 13, 2012 at 16:43
• try to use this if you accept jQuery $('form input[type=radio]:checked') or $('form input[type=radio]:checked').val();. This must return the number of checked radio inputs. Sorry no time for testing by myself. – loler Commented Jul 13, 2012 at 16:44

 |  Show 7 more ments

2 Answers 2

Sorted by: Reset to default 3

Try this - http://jsfiddle/BeT4h/

<form method="post" action="index.php" name="buttons" id="form">

<script>
function showTime() {
    var inputs = document.getElementById("form").elements;
    var count  = 0;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'radio' && inputs[i].checked) {
            count++;
        }
    }
    alert(count);
}
</script>

Just make 5 of them checked by default. Put check='checked' for every other input. Put in all first_button or second_button.

本文标签： javascriptHow can I count the number of radio boxes selected and validateStack Overflow