jQuery 复选框改变和点击事件

Question

$(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?");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><br />
<input type="text" id="textbox1"/>

这里的.change()用于将复选框状态更新到文本框值中。我使用.click()来确认取消选择操作。如果用户选择取消，则复选标记将被还原，但.change()在确认之前就会触发。

这将导致状态不一致，当复选框被选中时，文本框显示false。

我该如何处理取消操作并使文本框值与勾选状态保持一致？

- Professor Chaos

---

它在FF和Chrome上工作，并在IE 8中表现出所解释的行为。因此，重要的是要注意您需要使其在哪些浏览器中工作以及您在哪些浏览器中看到错误。 - kasdega

这可能不是最好的，但我相信它在这里对我起作用：[http://jsfiddle.net/Skooljester/2Xxcn/]（http://jsfiddle.net/Skooljester/2Xxcn/）。 - ayyp

Answer 1

经测试，JSFiddle中的代码可以实现您所要求的功能。该方法的额外好处是在单击与复选框关联的标签时也会触发。

更新的答案:

$(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);        
    });
});

原回答：

$(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'));        
    });
});

- kasdega

---

注意，使用this.checked比使用$(this).is(':checked')更快：http://jsperf.com/prop-vs-ischecked/5。 - Dakota

@Dakota 承认，它要慢得多，但我们仍在谈论每秒 600k 次操作。也就是每毫秒 600 次。我认为，如果这开始导致您的网页性能问题，您可能需要重新评估您的 JavaScript ;) 然而，了解代码的性能指标是很好的。谢谢。 - Mike U

我同意您关于过早优化的看法，但考虑到 this.checked 更短且是本地JavaScript语言，因此通常使用它可能非常值得（除了速度快200到300倍之外）。 - Levite

我建议使用.prop()而不是.attr()，因为后者在某些情况下无法使用，并且我认为jQuery现在建议使用.prop()。 - kabadisha

我觉得 $('#textbox1').val(this.checked); 中的[this]指的是文档。应该改为$('#textbox1').val($('#checkbox1').is(':checked')); - yurin

Answer 2

演示

使用mousedown

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

- Joseph Marikle

---

当使用鼠标时它可以工作，但如果你用键盘检查它就不行。 - frinux

这是因为这个问题涉及到鼠标。请不要基于完全不同的问题而对答案进行投票贬值。如果您在键盘上检查复选框后无法触发指示器状态的问题，请发布一个相关问题，而不是轻率地对答案进行投票贬值。 - Joseph Marikle

@kasdega，很抱歉我在那个领域不是专家，但我敢猜测这对于那种情况不是一个好的解决方案。我不确定屏幕阅读器如何处理表单。我想他们使用键盘空格键来选择或取消复选框，在这种情况下，我会建议使用keydown事件，或者更好的方法是忽略这个问题，让它自动触发changed事件。这里的问题是复选框在确认或取消之前看起来已经被选中了。这样的美学对于使用屏幕阅读器的人并不重要。 - Joseph Marikle

@VivekVikranth 你可以将相同的事件添加到标签中。你可以在触发事件时确定适当的单选按钮，但为了演示目的，这里有一个简单的例子：http://jsfiddle.net/4DqXv/888/ - Joseph Marikle

因为mousedown不是用户与复选框交互的唯一方式，所以被点踩。 - Jonathan

Answer 3

如果您使用<label for="cbId">cb name</label>，大多数答案可能无法捕捉到它（可能）。这意味着当您单击标签时，它将选中复选框，而不是直接单击复选框。（不完全是问题，但各种搜索结果往往会指向这里）

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

在这种情况下，你可以使用：

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());
    }
});

jQuery 1.6.4 JSFiddle 示例

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最新的jQuery 2.x示例

• 添加了JSFiddle示例和带有可点击复选框标签的HTML

- lko

---

应该使用 #OuterDivOrBody 而不是 .OuterDivOrBody :) - Laurent Brieu

我知道这个问题非常老了，但是我在寻找其他东西时偶然发现了它，并想让你知道，在第二个示例中（我没有检查第一个示例），如果用户点击取消，你仍然会取消选择并显示为false，如果他们取消，则应该保持选中并显示为true。以防你想要修复它。 - GµårÐïåñ

Answer 4

嗯...为了避免头痛(这里已经过了午夜), 我可以提出以下方案:

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

希望这能帮到你

- zarun

Answer 5

晚回答，但您也可以使用 on("change")，即：

$('#check').on('change', function() {
     var checked = this.checked
    $('span').html(checked.toString())
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="check"> <span>Check me!</span>

- Pedro Lobito

---

谢谢您，上面的回答过于详细，而您的简洁明了，足够了。谢谢。 - Basheer AL-MOMANI

Answer 6

这是给你的

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>

- NoWar

Answer 7

对我来说，这很有效:

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

- chris

---

通过网络搜索发现此事。你应该使用“prop”而不是“attr” >> http://api.jquery.com/prop/ - Dr Schizo

Answer 8

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

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

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

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

- Geeti

Answer 9

在同一个事件循环中单击复选框并检查其值是一个问题。

尝试这个：

$('#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);
});

演示：http://jsfiddle.net/mrchief/JsUWv/6/

- Mrchief

Answer 10

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

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

- umer