jQuery 复选框改变和点击事件

Question

jQuery 复选框改变和点击事件

703

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

1

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

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

21个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yoozer8 · Answer 1

摆脱change事件，改为在click事件中更改文本框的值。不要返回confirm的结果，而是将其捕获在一个变量中。如果是true，则更改值。然后返回该变量。

- ShankarSangoli · Answer 2

试试这个

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

- Jason · Answer 3

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

- Marcelo De Zen · Answer 4

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

- user3636759 · Answer 5

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

- Char · Answer 6

我不确定为什么大家都把这个问题搞得这么复杂。下面是我的做法：

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

- Hovhannes Ghazaryan · Answer 7

$('#checkboxId').change(() => {
    if($('#checkboxId').is(':checked')) {
        $('#checkboxStatus').text('Active')
    } else {
        $('#checkboxStatus').text('Inactive')
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<label><input type="checkbox" id="checkboxId">Click on me!</lable>
<div id="checkboxStatus">Off</div>

- Siva Anand · Answer 8

通过name获取单选按钮的值

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

- Kamil Kiełczewski · Answer 9

尝试

checkbox1.onclick= e => {
  if(!checkbox1.checked) checkbox1.checked = !confirm("Are you sure?");
  textbox1.value = checkbox1.checked;
}

<input type="checkbox" id="checkbox1" /><br />
<input type="text" id="textbox1" value='false'/>

- Zahra Badri · Answer 10

试试这个：

    let checkbox = document.getElementById('checkboxId');
    if (checkbox.checked != true)
    {
        alert("select checkbox");
    }