单击取消时如何将复选框设置为未选中

Question

I have a bootbox script that displays a custom alert. When clicking cancel I need the checkbox that fires the alert to go back to unchecked.

This is my checkbox when checked

<div class="checkbox">
     <label>
     <input type="checkbox" id="enroll-deposit" checked="" data-original-title="" title="" value="True"> I am not enrolling in Direct Deposit
     </label>
</div>

and this is my bootbox script thats fired on click

$(document).on("click", "#enroll-deposit", function(e) {
    var val = $(this).val();
    if (val == "True") {
        var url = "@Url.Action("waivetask", "OBProcess" , new { id=ViewBag.DocId, tid=ViewBag.TaskId })";
        var desc = "Direct Deposit";
        bootbox.dialog({
            message: "Are you sure you want to waive " + "<strong>" + desc + "</strong>",
            title: "Waive Direct Deposit",
            buttons: {
                main: {
                    label: "Cancel",
                    className: "btn-default",
                    callback: function() {
                        //NOT SURE WHAT TO PUT
                    }
                },
                danger: {
                    label: "Waive and Move On to Next Task",
                    className: "btn-danger",
                    callback: function() {
                        window.location.href = url;
                    }
                }
            }
        });
    }
});

I am not sure what to do when the user clicks the cancel button. I want to uncheck the enroll-deposit box.

Answer 1

There is another way to uncheck:

$('input[type=checkbox]').prop('checked', false);

And instead of using:

var val = $(this).val();

You could use:

var isChecked = $(this).is(':checked');  

Maybe its best to refactor your code like this:

$(document).on("click", "#enroll-deposit", function() {
    var isChecked = $(this).is(':checked');    
    if (isChecked) {
        var url = '@Url.Action("waivetask", "OBProcess" , new { id=ViewBag.DocId, tid=ViewBag.TaskId })';
        bootbox.dialog({
            message: "Are you sure you want to waive <strong> Direct Deposit </strong>",
            title: "Waive Direct Deposit",
            buttons: {
                main: {
                    label: "Cancel",
                    className: "btn-default",
                    callback: function() {
                        //NOT SURE WHAT TO PUT
                    }
                },
                danger: {
                    label: "Waive and Move On to Next Task",
                    className: "btn-danger",
                    callback: function() {
                        window.location.href = url;
                    }
                }
            }
        });
    }
});

Hope I was helpful.

Answer 2

$('input:checkbox').removeAttr('checked');

Answer 3

写这个

$("#enroll-deposit").prop('checked',false);

Answer 4

Checked is not an attribute. It's actually a property. Looks like you're using jQuery so in your "else" statement you could do

$(this).prop("checked",false);