checkbox : on/off using button

Question

There is a CheckBox & Button, I want to click on Button to checked & unchecked the checkBox without touching the checkBox. How to do that ???

<input type = "checkbox"  id = "check" />
<input type = "button"  id = "buttonId" />

<script type = "text/javascript">
   $(function() {
       $("#buttonId").click( function() { 
            if( $("#check").is_NOT_CHECKED) {
                 CHECKED_CheckBox;
                        }         else 
                     if($("#check").is_CHECKED) {
                           UnCHECKED_CheckBox;
                           }    
                    });
   </script>

Similar to http://stackoverflow.com/questions/426258/how-do-i-check-a-checkbox-with-jquery-or-javascript ? — anothershrubery, Jul 27 '11 at 11:00

Felix Kling · Answer 1 · 2011-07-27T11:08:38.517

6

$("#buttonId").click( function() {
    // or .attr() prior to jQuery 1.6
    $("#check").prop('checked', function(i, val) {
        return !val;
    });
});

Depending on the context, you could also make use of the fact, that clicking on the label of a checkbox toggles its status:

<input type="checkbox" id="check" name="check"/> 
<label for="check">Some text</label>

Works without JavaScript :)

edited Jul 27 '11 at 11:08

answered Jul 27 '11 at 11:01

Felix Kling

795,719
175
1,089
1,143

Nice... uses .prop(propertyName, function(index, oldPropertyValue)) override added in jQuery v1.6 (http://api.jquery.com/prop/) – Dunc Sep 18 '11 at 10:17

score 2 · Accepted Answer · answered Jul 27 '11 at 11:10

2

How about

$("#buttonId").click( function() {
    var checkbox = $("#check")[0];

    checkbox.checked = !checkbox.checked; // invert its checked status

});

demo at http://jsfiddle.net/gaby/czRkv/

answered Jul 27 '11 at 11:10

Gabriele Petrioli

191,379
34
261
317

score 0 · Answer 3 · answered Sep 26 '12 at 08:30

Say these are your checkbox and button:

<input id="checkbox_id" type="checkbox" /><br>
<input id="button_id" type="button" value="Change" />

Then you can perform checkbox on/off using this code:

$("#button_id").click(function() {
    // if the checkbox is not checked
    if (! $("#checkbox_id").is(":checked")) {
        $("#checkbox_id").prop("checked", true);
    } else { // if the checkbox is checked
        $("#checkbox_id").prop("checked", false);        
    }
});

See this live demo: http://jsfiddle.net/kvRG4/

checkbox : on/off using button

3 Answers3