jQuery checkbox change and click event

问题:

I have

<input type=\"checkbox\" id=\"checkbox1\" /> <br />
<input type=\"text\" id=\"textbox1\" />

and

$(document).ready(function() {
    //set initial state.
    $(\'#textbox1\').val($(this).is(\':checked\'));

    $(\'#checkbox1\').change(function() {
        $(\'#textbox1\').val($(this).is(\':checked\'));
    });

    $(\'#checkbox1\').click(function() {
        if (!$(this).is(\':checked\')) {
            return confirm(\"Are you sure?\");
        }
    });
});

JSFIDDLE link

Here the changed event updates the textbox value with the checkbox status. I use the click event to confirm the action on uncheck. If the user selects cancel, the check mark is restored but the change even fires before confirmation leaving things in a inconsistent state (the textbox says false when the checkbox is checked). How can I deal with the cancellation and keep textbox value consistent with the check state?

回答1:

Well I don\'t see an answer that matches mine so I\'ll post this. Tested in JSFiddle and does what you\'re asking for.This approach has the added benefit of firing when a label associated with a checkbox is clicked.

Original Answer:

$(document).ready(function() {
    //set initial state.
    $(\'#textbox1\').val($(this).is(\':checked\'));

    $(\'#checkbox1\').change(function() {
        if($(this).is(\":checked\")) {
            var returnVal = confirm(\"Are you sure?\");
            $(this).attr(\"checked\", returnVal);
        }
        $(\'#textbox1\').val($(this).is(\':checked\'));        
    });
});

Updated Answer:

$(document).ready(function() {
    //set initial state.
    $(\'#textbox1\').val(this.checked);

    $(\'#checkbox1\').change(function() {
        if(this.checked) {
            var returnVal = confirm(\"Are you sure?\");
            $(this).prop(\"checked\", returnVal);
        }
        $(\'#textbox1\').val(this.checked);        
    });
});

回答2:

Demo

Use mousedown

$(\'#checkbox1\').mousedown(function() {
    if (!$(this).is(\':checked\')) {
        this.checked = confirm(\"Are you sure?\");
        $(this).trigger(\"change\");
    }
});

回答3:

Most of the answers won\'t catch it (presumably) if you use <label for=\"cbId\">cb name</label>. This means when you click the label it will check the box instead of directly clicking on the checkbox. (Not exactly the question, but various search results tend to come here)

<div id=\"OuterDivOrBody\">
    <input type=\"checkbox\" id=\"checkbox1\" />
    <label for=\"checkbox1\">Checkbox label</label>
    <br />
    <br />
    The confirm result:
    <input type=\"text\" id=\"textbox1\" />
</div>

In which case you could use:

Earlier versions of jQuery:

$(\'#OuterDivOrBody\').delegate(\'#checkbox1\', \'change\', function () {
    // From the other examples
    if (!this.checked) {
        var sure = confirm(\"Are you sure?\");
        this.checked = !sure;
        $(\'#textbox1\').val(sure.toString());
    }
});

JSFiddle example with jQuery 1.6.4

jQuery 1.7+

$(\'#checkbox1\').on(\'change\', function() { 
    // From the other examples
    if (!this.checked) {
        var sure = confirm(\"Are you sure?\");
        this.checked = !sure;
        $(\'#textbox1\').val(sure.toString());
    }
});

JSFiddle example with the latest jQuery 2.x

• Added jsfiddle examples and the html with the clickable checkbox label

回答4:

Well .. just for the sake of saving a headache (its past midnight here), I could come up with:

$(\'#checkbox1\').click(function() {
  if (!$(this).is(\':checked\')) {
    var ans = confirm(\"Are you sure?\");
     $(\'#textbox1\').val(ans);
  }
});

Hope it helps

回答5:

For me this works great:

$(\'#checkboxID\').click(function () {
    if ($(this).attr(\'checked\')) {
        alert(\'is checked\');
    } else {
        alert(\'is not checked\');
    }
})

回答6:

Here you are

Html

<input id=\"ProductId_a183060c-1030-4037-ae57-0015be92da0e\" type=\"checkbox\" value=\"true\">

JavaScript

<script>
    $(document).ready(function () {

      $(\'input[id^=\"ProductId_\"]\').click(function () {

        if ($(this).prop(\'checked\')) {
           // do what you need here     
           alert(\"Checked\");
        }
        else {
           // do what you need here         
           alert(\"Unchecked\");
        }
      });

  });
</script>

回答7:

Get rid of the change event, and instead change the value of the textbox in the click event. Rather than returning the result of the confirm, catch it in a var. If its true, change the value. Then return the var.

回答8:

Checkbox click and checking for the value in the same event loop is the problem.

Try this:

$(\'#checkbox1\').click(function() {
    var self = this;
    setTimeout(function() {

        if (!self.checked) {
            var ans = confirm(\"Are you sure?\");
            self.checked = ans;
            $(\'#textbox1\').val(ans.toString());
        }
    }, 0);
});

Demo: http://jsfiddle.net/mrchief/JsUWv/6/

回答9:

Try this

$(\'#checkbox1\').click(function() {
        if (!this.checked) {
            var sure = confirm(\"Are you sure?\");
            this.checked = sure;
            $(\'#textbox1\').val(sure.toString());
        }
    });

回答10:

$(document).ready(function() {
    //set initial state.
    $(\'#textbox1\').val($(this).is(\':checked\'));

    $(\'#checkbox1\').change(function() {
        $(\'#textbox1\').val($(this).is(\':checked\'));
    });

    $(\'#checkbox1\').click(function() {
        if (!$(this).is(\':checked\')) {
            if(!confirm(\"Are you sure?\"))
            {
                $(\"#checkbox1\").prop(\"checked\", true);
                $(\'#textbox1\').val($(this).is(\':checked\'));
            }
        }
    });
});

回答11:

// this works on all browsers.

$(document).ready(function() {
    //set initial state.
    $(\'#textbox1\').val($(this).is(\':checked\'));

    $(\'#checkbox1\').change(function(e) {
        this.checked =  $(this).is(\":checked\") && !!confirm(\"Are you sure?\");
        $(\'#textbox1\').val(this.checked);
        return true;
    });
});

回答12:

$(\'#checkbox1\').click(function() {
    if($(this).is(\":checked\")) {
        var returnVal = confirm(\"Are you sure?\");
        $(this).attr(\"checked\", returnVal);
    }
    $(\'#textbox1\').val($(this).is(\':checked\')); 
});


<div id=\"check\">
    <input type=\"checkbox\" id=\"checkbox1\" />
    <input type=\"text\" id=\"textbox1\" />
</div>

回答13:

if you are using the iCheck Jquery use the below code

 $(\"#CheckBoxId\").on(\'ifChanged\', function () {
                alert($(this).val());
            });

回答14:

simply just use click event my check box id is CheckAll

     $(\'#CheckAll\').click(function () {

        if ($(\'#CheckAll\').is(\':checked\') == true) {

             alert(\";)\");
      }
    }

回答15:

get radio value by name

 $(\'input\').on(\'className\', function(event){
        console.log($(this).attr(\'name\'));
        if($(this).attr(\'name\') == \"worker\")
            {
                resetAll();                 
            }
    });

回答16:

I am not sure why everyone is making this so complicated. This is all I did.

if(!$(this).is(\":checked\")){ console.log(\"on\"); }