jQuery 复选框更改和单击事件 [英] jQuery checkbox change and click event

问题描述

$(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() 在确认之前会触发.

Here .change() updates the textbox value with the checkbox status. I use .click() to confirm the action on uncheck. If the user selects cancel, the checkmark is restored but .change() fires before confirmation.

这会使事情处于不一致的状态，并且在选中复选框时文本框会显示 false.

This leaves things in an inconsistent state and 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?

推荐答案

已在 JSFiddle 中测试并且确实你在问什么.当点击与复选框关联的标签时，这种方法具有触发的额外好处.

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.

更新答案:

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

这篇关于jQuery 复选框更改和单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！