Jquery Group Radio selection

Question

I have radio buttons like this

<input name="show[1]" type="radio" value="1" /> Show<br>
<input name="show[1]" type="radio" value="0" /> Hide<br>

<input name="show[2]" type="radio" value="1" /> Show<br>
<input name="show[2]" type="radio" value="0" /> Hide<br>
...
...
...
<input name="show[n]" type="radio" value="1" /> Show<br>
<input name="show[n]" type="radio" value="0" /> Hide<br>

here length of n can varies.

This is a part of form submit. In jquery i want to make sure one of radio button from each group should be selected. How can i do this

what have you tried until now? by the way, if it's show/hide, why don't you just use one button for each section and use jquery's `toggle` function? — benomatis, Mar 24 '14 at 07:40
Might help you http://jsfiddle.net/3ews7/ or http://jsfiddle.net/3ews7/1/ — Satpal, Mar 24 '14 at 07:44

score 1 · Accepted Answer · answered Mar 24 '14 at 07:50

1

Try this:

$(':radio').each(function() {
    nam = $(this).attr('name');
    if (submitme && !$(':radio[name="'+nam+'"]:checked').length) {
        alert(nam+' group not checked');
        submitme = false;
    }
});

Working Demo

answered Mar 24 '14 at 07:50

Milind Anantwar

81,290
25
94
125

Swapnil Patil · Answer 2 · 2014-03-24T07:51:47.597

You can loop through all the numbers for show array and checked whether the radio button is selected or not like as follow.

var n=2;
var allSelected=false;
for(i=1;i<=n;i++){
    if($('[name="show['+n+']"]').is(':checked') == false){
        break;
    }
    allSelected = true;
}
if(allSelected==true){
    alert('All selected');
}
else{
    alert('All not selected');   
}

After looping ,If you get true in allSelected then you can make sure that one of radio button from each group should is selected.

Hope this will help you.

score 0 · Answer 3 · answered Mar 24 '14 at 07:49

try this [fiddle][1]

$("#submit").click(function(){
alert($('input[class=show]:radio:not(:checked)').val("1").length)
});

this will return the number of show radio buttons not selected .. so if it alerts n means no show checkboxes have been checked of else if it alerts a number less than n means there means there are checked radio buttons.

Does this help

score 0 · Answer 4 · edited May 23 '17 at 12:20

This can be easily done using HTML5 requriedReference.
CODE

<form method="post">
    <input name="show[1]" type="radio" value="1" required/>Show
    <br>
    <input name="show[1]" type="radio" value="0" required/>Hide
    <br>
    <input name="show[2]" type="radio" value="1" required/>Show
    <br>
    <input name="show[2]" type="radio" value="0" required/>Hide
    <br>
    <input name="show[n]" type="radio" value="1" required/>Show
    <br>
    <input name="show[n]" type="radio" value="0" required/>Hide
    <br>
    <input type="submit" value="submit" />
</form>

A working example.

score 0 · Answer 5 · answered Mar 24 '14 at 08:19

An iterative approach:

HTML

<input name="show[1]" type="radio" value="1" /> Show<br>
<input name="show[1]" type="radio" value="0" /> Hide<br>
<input name="show[2]" type="radio" value="1" /> Show<br>
<input name="show[2]" type="radio" value="0" /> Hide<br>
<input name="show[3]" type="radio" value="1" /> Show<br>
<input name="show[3]" type="radio" value="0" /> Hide<br>
<button>Check</button>

JavaScript:

function check_radio_buttons() {
    var i=1;
    while ($("input[name='show[" + i + "]']").attr("value")) {
        if(!$("input[name='show[" + i + "]']:checked").attr("value")) {
            return false;
        }
        i++;
    }
    return true;
}

$("button").click( function () {
    alert(check_radio_buttons());
});

You must make sure that the inputs as sequential from 1 to n.

Fiddle

Jquery Group Radio selection

5 Answers5

HTML

JavaScript: