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

我如何处理取消并保持文本框值与判断状态一致?

推荐答案

经过JSFiddle次测试,满足你的要求.这种方法还有一个额外的好处,就是在单击与复选框关联的标签时触发.

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

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

Javascript相关问答推荐

随着 Safari 中输入文本的变化,输入类型文本下方的 div 上下移动

处理 Svelte 组件props 的最佳方式

PHP中的搜索功能

获取但只获取状态?

停止点击包装事件监听器

更改路径时react 路由dom不起作用

Javascript 通过从数组值中仅选择真值来更改值

过滤递归数组

删除有条件的重复对象

React 什么时候调用组件构造函数,执行流程是怎样的?

按 ID 查找和更新嵌套数组元素

如何在不重新渲染未删除的项目的情况下从列表中删除项目?

两行相同代码的区别

如何使用 JavaScript 对从 JSON 数据生成的 HTML Div 使用搜索/过滤器?

输入数字必须是 6 位数字或 9 位数字

正文尺寸小于视口时如何设置背景 colored颜色 ?

onclick 更改所有映射的项目,而不仅仅是一个

如何在 Svelte 中制作累积过滤系统(如亚马逊侧边栏)

如何在 Javascript 中组合这 2 个正则表达式

如何使用递归函数构造 id/parentIds