jQuerycheckbox更改并单击事件
我有
<input type="checkbox" id="checkbox1" /> <br /> <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链接
这里更改的事件用checkbox状态更新文本框的值。 我使用click事件来确认操作取消选中。 如果用户select取消，则复选标记将被恢复，但更改甚至会在确认事件处于不一致状态之前触发（当checkbox被选中时，文本框会显示为false）。 我怎样才能处理取消和保持文本框的值与检查状态一致？
那么我没有看到一个符合我的答案，所以我会张贴这个。 在JSFiddle中testing，并做你要求的。这种方法有一个额外的好处，当点击与checkbox相关的标签点击。
原始答案：
$(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')); }); });
已更新答案：
$(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); }); });
演示
使用mousedown
$('#checkbox1').mousedown(function() { if (!$(this).is(':checked')) { this.checked = confirm("Are you sure?"); $(this).trigger("change"); } });
如果你使用<label for="cbId">cb name</label>大部分的答案都不会被捕获（假定）。 这意味着当你点击标签时，将会选中该框，而不是直接点击checkbox。 （不完全是问题，但各种search结果往往来到这里）
<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()); } });
JSFiddle最新的jQuery 2.x示例
- 添加jsfiddle的例子和HTML与可点击的checkbox标签
那么..只是为了节省头痛（过去的午夜在这里），我可以想出：
$('#checkbox1').click(function() { if (!$(this).is(':checked')) { var ans = confirm("Are you sure?"); $('#textbox1').val(ans); } });
希望它有帮助
对我来说这很好用：
$('#checkboxID').click(function () { if ($(this).attr('checked')) { alert('is checked'); } else { alert('is not checked'); } })
这个给你
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>
摆脱更改事件，而是更改click事件中的文本框的值。 而不是返回确认的结果，在一个变种。 如果它是真的，改变价值。 然后返回var。
checkbox单击并检查相同的事件循环中的值是问题。
尝试这个：
$('#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/
尝试这个
$('#checkbox1').click(function() { if (!this.checked) { var sure = confirm("Are you sure?"); this.checked = sure; $('#textbox1').val(sure.toString()); } });
$(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')); } } }); });
// 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; }); });
$('#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>
只需使用点击事件我的checkboxID是CheckAll
$('#CheckAll').click(function () { if ($('#CheckAll').is(':checked') == true) { alert(";)"); } }
通过名字获得无线电价值
$('input').on('className', function(event){ console.log($(this).attr('name')); if($(this).attr('name') == "worker") { resetAll(); } });
我不确定为什么每个人都这么复杂。 这是我所做的一切。
if(!$(this).is(":checked")){ console.log("on"); }
