jQuery复选框更改并单击事件-Java 学习之路

460

我有

<input type="checkbox" id="checkbox1" /> 

<input type="text" id="textbox1" />

和

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

JSFIDDLE link

此处更改的事件使用复选框状态更新文本框值 . 我使用click事件来确认取消选中时的操作 . 如果用户选择取消，则复选标记将被恢复，但更改甚至会在确认之前触发，从而使事物处于不一致状态（选中复选框时文本框显示为false） . 如何处理取消并保持文本框值与检查状态一致？

16 回答

好吧，我不会发布这个帖子 . 在_619679中测试并执行您要求的操作 . 当单击与复选框关联的标签时，此方法具有触发的额外好处 .

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

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

回复于 2024-04-28T12:01:36+08:00

演示

使用 mousedown

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

回复于 2024-04-28T12:01:36+08:00

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

<div id="OuterDivOrBody">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1">Checkbox label</label>
    

    

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

JSFiddle example with jQuery 1.6.4

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 example with the latest jQuery 2.x

添加了jsfiddle示例和带有可单击复选框标签的html

回复于 2024-04-28T12:01:36+08:00

嗯..只是为了挽救头痛（过去午夜），我可以想出：

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

希望能帮助到你

回复于 2024-04-28T12:01:36+08:00

对我来说这很有用：

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

回复于 2024-04-28T12:01:36+08:00

这个给你

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>

回复于 2024-04-28T12:01:36+08:00

4

摆脱更改事件，而是更改单击事件中文本框的值 . 而不是返回确认的结果，在var中捕获它 . 如果是真的，请更改该值 . 然后返回var .

回复于 2024-04-28T12:01:36+08:00

复选框单击并检查同一事件循环中的值是问题 .

试试这个：

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

回复于 2024-04-28T12:01:36+08:00

试试这个

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

回复于 2024-04-28T12:01:36+08:00

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

回复于 2024-04-28T12:01:36+08:00

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

回复于 2024-04-28T12:01:36+08:00

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

回复于 2024-04-28T12:01:36+08:00

747

如果您使用的是iCheck Jquery，请使用以下代码

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

回复于 2024-04-28T12:01:36+08:00

只需使用点击事件我的复选框ID是CheckAll

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

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

             alert(";)");
      }
    }

回复于 2024-04-28T12:01:36+08:00

通过 name 获取无线电值

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

回复于 2024-04-28T12:01:36+08:00

42
我不确定为什么每个人都这么复杂 . 这就是我所做的一切 .
```
if(!$(this).is(":checked")){ console.log("on"); }
```
回复于 2024-04-28T12:01:36+08:00

jQuery复选框更改并单击事件

16 回答

演示

相关问题