How to check the multiple indicdual radio buttons in jQuery?

debugcn Published at Dev

user3494837

In my page so many group radio buttons are there like this.

first div "Request-1" only default checked.After button click I am calling the below jQuery function to assign selected value to other div radio buttons.

if ($("#Request-1:input:checked").length > 0) {

            $("#Request-2").attr('checked', 'checked');
            $("#Request-3").attr('checked', 'checked');
            $("#Request-4").attr('checked', 'checked');
        }
        else if ($("#DRequest-1:input:checked").length > 0) {
            $("#DRequest-2").attr('checked', 'checked');
            $("#DRequest-3").attr('checked', 'checked');
            $("#DRequest-4").attr('checked', 'checked');

        }

But only #REquest-4 is checking other radio buttons are not checking .Please tell me how to check all radio buttons .

 <div id="choose-1">
<input id="Request-1"  type="radio" name="request-type"  checked="checked"/>Data REquest



     <input id="DRequest-1"  type="radio" name="request-type"/>D Request Data
    </div>
 <div id="choose-2">
    <input id="Request-2"  type="radio" name="request-type" />Data REquest

      <input id="DRequest-2"  type="radio" name="request-type"/>D Request Data
    </div>
 <div id="choose-3">
    <input id="Request-3"  type="radio" name="request-type" />Data REquest

      <input id="DRequest-13"  type="radio" name="request-type"/>D Request Data
    </div>
 <div id="choose-4">
    <input id="Request-4"  type="radio" name="request-type"  checked="checked"/>Data REquest

      <input id="DRequest-4"  type="radio" name="request-type"/>D Request Data
    </div>

Rohan Kumar

You are using radio buttons and they are in a same group request-type so only one can be selected in this case

To work you need to use checkboxes inplace of radios

Then try to use prop() and merge all selectors separated by a , like

if ($("#Request-1:checked").length > 0) {
   $("#Request-2, #Request-3, #Request-4").prop('checked', true);
}
else if ($("#DRequest-1:checked").length > 0) {
   $("#DRequest-2, #DRequest-3, #DRequest-4").prop('checked', true);
}

Live Demo

If you need to toggle checkboxes on changing their status then try this,

$('#Request-1').on('change',function(){
    $("#Request-2, #Request-3, #Request-4").prop('checked', this.checked);    
}).change();
$('#DRequest-1').on('change',function(){
    $("#DRequest-2, #DRequest-3, #DRequest-4").prop('checked', this.checked);    
}).change();

Checkbox change demo

Again you need to use radios then you need to change radio buttons grouping like,

<div id="choose-1">
    <input id="Request-1" type="radio" name="request-type" checked="checked" />Data REquest
    <input id="DRequest-1" type="radio" name="request-type" />D Request Data</div>
<div id="choose-2">
    <input id="Request-2" type="radio" name="request-type-2" />Data REquest
    <input id="DRequest-2" type="radio" name="request-type-2" />D Request Data</div>
<div id="choose-3">
    <input id="Request-3" type="radio" name="request-type-3" />Data REquest
    <input id="DRequest-3" type="radio" name="request-type-3" />D Request Data</div>
<div id="choose-4">
    <input id="Request-4" type="radio" name="request-type-4" />Data REquest
    <input id="DRequest-4" type="radio" name="request-type-4" />D Request Data
</div>

Radio change demo

Collected from the Internet

Please contact [email protected] to delete if infringement.