jQuery 复选框更改和单击事件

IT技术 javascript jquery checkbox event-handling
2021-02-06 20:53:35 

$(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。

如何处理取消并保持文本框值与检查状态一致？

6个回答

在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'));        
    });
});
@MikeU：同意您对过早优化的看法，但考虑this.checked到编写 + 原生 javascript 的时间要短得多，一般来说可能真的值得使用（除了快 200 到 300 倍之外）。
2021-03-11 20:53:35
我会推荐 .prop() 而不是 .attr() 因为后者在所有情况下都不起作用，我相信 jQuery 现在推荐 .prop() 。
2021-03-20 20:53:35
刚一说明，它的速度更快使用this.checked，而不是$(this).is(':checked')：jsperf.com/prop-vs-ischecked/5
2021-03-27 20:53:35
我认为 [this] 在 $('#textbox1').val(this.checked); 中 指文档。它应该是 $('#textbox1').val($('#checkbox1').is(':checked'));
2021-04-08 20:53:35
@Dakota 当然，它要慢得多，但我们仍在谈论 600k 操作/秒。因此，每毫秒 600 次。我认为如果这开始导致您的网页出现性能问题，您可能需要重新评估您的 javascript ;) 不过，使用代码了解性能指标是很好的。谢谢。
2021-04-10 20:53:35

演示

利用 mousedown

$('#checkbox1').mousedown(function() {
    if (!$(this).is(':checked')) {
        this.checked = confirm("Are you sure?");
        $(this).trigger("change");
    }
});
它在检查时显示警报，它总是阻止我实际上检查。这是在 Chrome 上。
2021-03-25 20:53:35
与@pimvdm 相同。即使选中操作也会弹出确认（它应该只弹出取消选中）并且选择确定不会导致选中该框。
2021-03-30 20:53:35
它在使用鼠标时有效，但在使用键盘检查时无效。
2021-04-01 20:53:35
@frinux 那很简单，因为这是一个与鼠标相关的问题。 请不要根据答案与完全不同的问题的相关性而贬低答案。如果您在通过键盘选中复选框后触发指标状态时遇到问题，请发布有关它的问题，而不是粗心地拒绝回答。
2021-04-07 20:53:35
由于 mousedown 不是用户与复选框交互的唯一方式，因此被否决。
2021-04-09 20:53:35

如果您使用<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>

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

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

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

带有最新 jQuery 2.x 的 JSFiddle 示例

  • 添加了 jsfiddle 示例和带有可点击复选框标签的 html
我知道这是 SUPER OLD 但我在寻找其他东西时遇到它并想让你知道在第二个例子中（我没有检查第一个小提琴）如果这个人点击取消，你仍然取消选中并显示错误，如果他们取消那么它应该让它检查并说真的。以防万一你想修复它。
2021-03-29 20:53:35
它是 #OuterDivOrBody 不是 .OuterDivOrBody :)
2021-03-30 20:53:35

好吧.. 只是为了避免头痛（这里已经过了午夜），我可以想出：

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

希望能帮助到你

迟到的答案，但您也可以使用 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>

谢谢你，上面的回答很详细，你的很简单，足够了。谢谢
2021-03-11 20:53:35
其它你可能感兴趣的问题
上一篇你如何检查一个 JavaScript 对象是否是一个 DOM 对象？ 下一篇我可以按日期查询 MongoDB ObjectId 吗？