jQuery复选框更改和单击事件。

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

JSFIDDLE链接

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?

在这里，更改的事件用复选框状态更新文本框值。我使用单击事件来确认uncheck上的操作。如果用户选择“取消”，复选框将被还原，但即使在确认前更改也会触发，使内容处于不一致状态(当选中复选框时，文本框将显示为false)。如何处理取消并保持文本框的值与复选框的状态一致?

16 个解决方案

#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.

我没有找到匹配我的答案的答案，所以我会把它发布。在JSFiddle测试并执行您所要求的操作。当单击与复选框关联的标签时，这种方法还有一个额外的好处。

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

使用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)

如果您使用cb name，大多数答案都不会被捕获。这意味着当您单击标签时，它将选中该框，而不是直接单击复选框。(问题不完全是这个问题，但是各种搜索结果都会出现在这里)

<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:

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.6.4的JSFiddle示例

jQuery 1.7+

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

JSFiddle是最新的jQuery 2.x示例

• Added jsfiddle examples and the html with the clickable checkbox label
• 添加了jsfiddle示例和带有可单击复选框标签的html

#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

Html

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

JavaScript

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.

删除change事件，而是在单击事件中更改文本框的值。与其返回确认的结果，不如将其捕获到一个var中。如果它是真，则更改该值。然后返回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/

演示: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

如果您正在使用iCheck Jquery，请使用以下代码

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

#14

simply just use click event my check box id is CheckAll

只需使用点击事件，我的复选框id为CheckAll。

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

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

             alert(";)");
      }
    }

#15

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

我不知道为什么每个人都这么复杂。这就是我所做的一切。

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

#16

get radio value by name

按名称获取无线电值

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