jQuery复选框更改和单击事件


564

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

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


1
它可以在FF和chrome中运行,并且在IE 8中具有已解释的行为。因此,可能需要特别注意要在哪些浏览器中工作以及看到哪些错误。
kasdega,2011年

它不是最好的,但是我相信它在这里对我有用:http : //jsfiddle.net/Skooljester/2Xxcn/
2011年

Answers:


904

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

128
刚一说明,它的速度更快使用this.checked,而不是$(this).is(':checked')jsperf.com/prop-vs-ischecked/5
达科他州

37
@Dakota Granted,它的速度要慢得多,但我们仍在谈论60万次操作/秒。因此,每毫秒600次。我认为,如果这开始导致您的网页上出现性能问题,则可能需要重新评估您的javascript;)最好还是用代码来了解性能指标。谢谢。
Mike U

51
@MikeU:在过早的优化上与您保持一致,但是考虑this.checked到编写+本机javascript的时间要短得多,因此通常值得使用(除了快200到300倍)。
莱维特2015年

11
我建议使用.prop()而不是.attr(),因为后者在所有情况下都无法正常工作,我相信jQuery现在建议使用.prop()。
kabadisha

2
我认为$('#textbox1')。val(this.checked);中的[this] 指文件。应该是$('#textbox1')。val($('#checkbox1')。is(':checked'));
yurin

90

演示版

采用 mousedown

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

在检查警报时会显示警报,并且实际上总是阻止我进行检查。这是在Chrome上。
pimvdb

与@pimvdm相同。确认会弹出以进行检查(仅应弹出以取消检查),选择“确定”不会导致选中该框。
混沌教授

1
使用鼠标时可以使用,但使用键盘检查时不可以。
frinux

3
@frinux这很简单,因为这是鼠标相关的问题。 请不要根据答案与完全不同的问题的相关性来投票否决。如果您在通过键盘选中复选框后触发指示器状态时遇到问题,请发布有关该指示器的问题,而不是不慎降低答案。
约瑟夫·马里克

3
不赞成投票,因为mousedown并不是用户与复选框进行交互的唯一方式。
乔纳森

51

如果您使用,大多数答案(大概)都不会抓住它<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示例和带有clickable复选框标签的html

1
不是#OuterDivOrBody。.OuterDivOrBody:)
Laurent Brieu

24

好吧..为了节省头疼(在这里午夜过去了),我可以提出:

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

希望能帮助到你


11

对我来说,这很棒:

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

4
通过网络搜索发现了这一点。您应该使用“ prop”而不是“ attr” >> api.jquery.com/prop
Schizo博士

11

这个给你

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>

6

摆脱更改事件,而是在单击事件中更改文本框的值。而不是返回确认结果,而是将其捕获到var中。如果为真,则更改该值。然后返回var。


6

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

尝试这个:

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


6

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

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

5

尝试这个

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

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

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

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

4

答案较晚,但您也可以使用 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>


1

只需使用click事件,我的复选框ID为CheckAll

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

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

             alert(";)");
      }
    }

1

名称获取单选值

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


-1
 $("#person_IsCurrentAddressSame").change(function ()
    {
        debugger
        if ($("#person_IsCurrentAddressSame").checked) {
            debugger

        }
        else {

        }

    })

3
仅代码的答案被认为是低质量的:请确保提供解释代码的作用以及如何解决问题的方法。如果您可以在帖子中添加更多信息,它将对询问者和将来的读者都有帮助。又见解释完全基于代码的答案:meta.stackexchange.com/questions/114762/...
borchvm
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.