jQuery 在复选框上切换选中的属性

Question

I want to check or uncheck a buttonstyled checkbox with the following code:

<ul id="ids_ul" class="nav nav-list">
    <li>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-info group_toggle" id="id_label1" for="id_checkboxes1">
            <input type="checkbox" value="1" id="id_checkboxes1" name="ids[]" autocomplete="off"/> One</label>
        </div>
    </li>
    <li>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-success group_toggle" id="id_label2" for="id_checkboxes2">
            <input type="checkbox" value="2" id="id_checkboxes2" name="ids[]" autocomplete="off"/> Two</label>
        </div>
    </li>
    <li>
        <div class="btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-info group_toggle" id="id_label3" for="id_checkboxes3">
            <input type="checkbox" value="3" id="id_checkboxes3" name="ids[]" autocomplete="off"/> Three</label>
        </div>
    </li>
</ul>

let checkbox_state = "";
$(".group_toggle").click(function(){
    $(this).toggleClass("btn-info btn-success");
    checkbox_state = $(this).children("input:first");

    console.log("Initial checkbox_state: " + checkbox_state.prop("checked"));
    if($(checkbox_state).prop("checked") == true) {
        $(checkbox_state).prop("checked", false);
        console.log("Checked after click: " + checkbox_state.prop("checked"));
    } else {
        $(checkbox_state).prop("checked", true);
        console.log("Checked after click: " + checkbox_state.prop("checked"));
    }
});

After four clicks on Two the log shows:

Initial checkbox_state: true
Checked after click: false

Initial checkbox_state: true // why still true?
Checked after click: false

Initial checkbox_state: false
Checked after click: true

Initial checkbox_state: true
Checked after click: false

On the 3rd click the uncheck works, but the button-class is now the opposite. If i click on One or Three to check the checkbox it works in the first try.

Does someone know what happens here?

Is there a more elegant way to verify the checkbox property checked ?

Answer 1

You can use e.preventDefault() to stop the default behavior of the clicked element, which seemed to cause the click event to fire twice when using twitter-bootstrap-3

Also, checkbox_state seems like a confusing name for the element, being as it actually stores the checkbox itself and you use prop('checked') to get it's state - I've updated this and change it to be inside the function, as you did not need this to be globally defined

 $('.group_toggle').click(function(e) { e.preventDefault(); $(this).toggleClass('btn-info btn-success'); let $checkbox = $(this).children('input:first'); let checked = $checkbox.prop('checked'); console.log(`Initial checkbox_state: ${checked}`); // Invert checked state $checkbox.prop('checked', !checked); console.log(`Checked after click: ${$checkbox.prop('checked')}`); });

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="ids_ul" class="nav nav-list"> <li> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info group_toggle" id="id_label1" for="id_checkboxes1"> <input type="checkbox" value="1" id="id_checkboxes1" name="ids[]" autocomplete="off"/>One </label> </div> </li> <li> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-success group_toggle" id="id_label2" for="id_checkboxes2"> <input type="checkbox" value="2" id="id_checkboxes2" name="ids[]" autocomplete="off"/>Two </label> </div> </li> <li> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info group_toggle" id="id_label3" for="id_checkboxes3"> <input type="checkbox" value="3" id="id_checkboxes3" name="ids[]" autocomplete="off"/>Three </label> </div> </li> </ul>

Answer 2

To somewhat expand on @Light's answer

The problem that I can see is the order of events happening and you trying to manually control the state of a checkbox. When you wrap a checkbox with a label (or use the for="#id" on the label) it delegates a click to the checkbox whenever the label is clicked (which is why it gets triggered twice). The other thing is your initial state of the buttons was incorrect, button Two had the class btn-success but was not active and the related checkbox wasn't checked. See below for complete resolution

 let checkbox_state = ""; $(".group_toggle").click(function(e){ e.preventDefault(); $(this).toggleClass("btn-info btn-success"); checkbox_state = $(this).children("input:first"); console.log("Initial checkbox_state: " + checkbox_state.prop("checked")); if($(checkbox_state).prop("checked") == true) { checkbox_state.prop('checked', false); console.log("Checked after click: " + checkbox_state.prop("checked")); } else { checkbox_state.prop('checked', true); console.log("Checked after click: " + checkbox_state.prop("checked")); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/> <ul id="ids_ul" class="nav"> <li> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info group_toggle" id="id_label1" for="id_checkboxes1"> <input type="checkbox" value="1" id="id_checkboxes1" name="ids[]" autocomplete="off"/> One</label> </div> </li> <li> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-success group_toggle active" id="id_label2" for="id_checkboxes2"> <input type="checkbox" value="2" id="id_checkboxes2" name="ids[]" autocomplete="off" checked=""/> Two</label> </div> </li> <li> <div class="btn-group-toggle" data-toggle="buttons"> <label class="btn btn-info group_toggle" id="id_label3" for="id_checkboxes3"> <input type="checkbox" value="3" id="id_checkboxes3" name="ids[]" autocomplete="off"/> Three</label> </div> </li> </ul>