简体   繁体   中英

checked radiobutton on checkbox change event

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>

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

For jQuery 1.9 or higher use

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

Otherwise try

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

Try this

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

Demo

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/

You just need this

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM