checked radiobutton on checkbox change event

Question

how we checked or unchecked all radiobutton on checkbox click.. if checkbox checked then all radiobutton also checked and vice versa.. it is not working properly

<input type="checkbox" id="Check" />SelectAll<br /><input type="radio"/>First<br />


    <input type="radio"/>Second<br />
            <input type="radio"/>Third<br />
            <input type="radio"/>Fourth<br />
            <input type="radio"/>Fifth</div>
            <script>
                var IsCheck = false;
                $(document).ready(function () {
                    $("#Check").change(function () {
                        if (IsCheck == false) {
                            $("input[type=radio]").attr("checked", true);
                            IsCheck == true
                        }
                        else { $("input[type=radio]").attr("checked", false); IsCheck == false }
                    });
                }); </script>

I dont think radio is the right choice http://en.wikipedia.org/wiki/Radio_button usually only one option in a group is selected — HMR, Jun 22 '13 at 11:15
(Important) side note: `var IsCheck = false;` introduces a global variable, which [is a bad thing](http://stackoverflow.com/questions/10525582/why-are-global-variables-considered-bad-practice-javascript). Wrap your JavaScript code inside a [self-invoking function](http://stackoverflow.com/questions/15313163/javascript-self-invoking-function). — Rudolph Gottesheim, Jun 22 '13 at 11:21

Nelson · Answer 1 · 2013-06-22T11:24:30.213

Take care you were just comparing operands instead of assigning to a variable in this statements:

IsCheck == true  
         ^------ REMOVE ONE = so it's an assignment

Also, don't use .attr("checked", true); the correct form is:

$("input[type=radio]").attr("checked", 'checked'); //checking for jQuery < 1.6

And unchecking:

$("input[type=radio]").removeAttr("checked");  //unchecking for jQuery < 1.6

If you are using jQuery > 1.6 you can use the .prop() method with a boolean, which is similar to how you were trying to use it:

$("input[type=radio]").prop("checked", true); //checking for jQuery >= 1.6
$("input[type=radio]").prop("checked", false); //unchecking for jQuery >= 1.6

score 2 · Answer 2 · edited Jun 22 '13 at 11:40

2

For jQuery 1.9 or higher use

$('input[type=radio]').prop("checked", true)

Otherwise try

 $('input[type=radio]').attr('checked', 'checked');

edited Jun 22 '13 at 11:40

laalto

150,114
66
286
303

answered Jun 22 '13 at 11:19

score 1 · Accepted Answer · answered Jun 22 '13 at 11:14

1

Try this

 $(document).ready(function () {                    
    $("#Check").change(function () {                        
      $("input[type=radio]").attr("checked", $("#Check").is(":checked"));                            
    });
 });

Demo

answered Jun 22 '13 at 11:14

Amit

15,217
8
46
68

score 1 · Answer 4 · answered Jun 22 '13 at 11:15

For your question, this could be the answer :

$("#Check").change(function () {
    $("input:radio").prop("checked", this.checked);
});

Demo : http://jsfiddle.net/hungerpain/QSx29/

That said, radio buttons are not the best way of doing this. Its not semantically right. You can have only one radio button selected in a group. Try using checkboxes instead. Try to change you're markup to this :

<input type="checkbox" id="Check" />SelectAll
<br />
<input type="checkbox" />First
<br />
<input type="checkbox" />Second
<br />
<input type="checkbox" />Third
<br />
<input type="checkbox" />Fourth
<br />
<input type="checkbox" />Fifth</div>

And replace the JS code to this :

$("#Check").change(function () {
    $("input:checkbox").prop("checked", this.checked);
});

Here's a demo : http://jsfiddle.net/hungerpain/QSx29/1/

Adil Shaikh · Answer 5 · 2013-06-22T11:23:31.977

1

You just need this

$("#Check").change(function () {
    $("input[type=radio]").prop("checked", this.checked);
});

Demo ----> http://jsfiddle.net/kLnyD/

edited Jun 22 '13 at 11:23

answered Jun 22 '13 at 11:16

Adil Shaikh

44,509
17
89
111

$("input[type=radio]") +1 for most effective code and first to use prop – HMR Jun 22 '13 at 11:20

score 0 · Answer 6 · answered Jun 22 '13 at 11:21

try this

http://jsfiddle.net/4u9sQ/

 $("#Check").change(function () {
                        if ($(this).is(':checked')) {
                            $("input[type=radio]").prop("checked", true);

                        }
                        else { $("input[type=radio]").prop("checked", false); }
                    });

checked radiobutton on checkbox change event

6 Answers6