如何检查单击时是不是选中了复选框?
Posted
技术标签:
【中文标题】如何检查单击时是不是选中了复选框?【英文标题】:How can I check if a checkbox is checked on click?如何检查单击时是否选中了复选框? 【发布时间】:2011-10-16 02:39:53 【问题描述】:当我单击复选框时,我需要根据复选框是否被选中来触发一些代码。
但由于某种原因,.is(':checked')
总是被触发。
这是我的代码。
jQuery('#selectlist input[type=checkbox]').live('click',function()
var select_id = jQuery(this).attr('id');
if(jQuery(this).is(':checked'))
alert('You have unchecked the checkbox');
// Remove some data from variable
else
alert('You have checked the checkbox');
//Add data to variable
更新 我在 JSFiddle 上添加了一个示例:http://jsfiddle.net/HgQUS/
【问题讨论】:
【参考方案1】:使用change
而不是click
【讨论】:
不管我用change
还是click
,结果还是一样。在此处查看我的示例> jsfiddle.net/HgQUS
@Steven -- 它工作正常,你只是把你的 if 语句倒过来:jsfiddle.net/maniator/HgQUS/4
if(jQuery(this).is(':checked'))
怎么会倒退?如果复选框被选中,这不控制吗?
是的,我明白了。我只是不明白if(jQuery(this).is(':checked'))
背后的逻辑。对我来说,这应该检查复选框是否被选中。还是我的逻辑在这里都错了?
好吧,没关系。 @Aleks 说了我的想法,当我点击它时,它 is 设置为选中 :)【参考方案2】:
$(this).val();
或
$(this).prop('checked'); # on jquery >= 1.6
你会更擅长搜索 SO:
Get checkbox value in jQuery How to retrieve checkboxes values in jQuery Testing if a checkbox is checked with jQuery【讨论】:
啊,propr
函数。忘了那个。但结果还是一样 :( jsfiddle.net/HgQUS/2 它的作用与它应该做的相反。
检查你的代码,你正在触发相反的动作...... :)【参考方案3】:
this.checked
应该告诉你复选框是否被选中,尽管这只是javascript,所以你不能在'jquery'元素上调用它。比如——
<input type="checkbox" id="checky">
$("#checky")[0].checked
【讨论】:
【参考方案4】:如果输入有checked属性,那么明显是checked,如果没有checked就去掉。
if ($(this).attr("checked"))
// return true
else
// return false
但是,您可以调整上面的代码来检查属性(如果它没有被删除而是设置为真/假)是否为以下:
if ($(this).attr("checked") == "true")
// return true
else
// return false
另外,我看到您使用 jQuery 作为选择器的运算符,您可以只使用美元符号$
,因为这是一个快捷方式。
【讨论】:
也试过了,但不起作用:jsfiddle.net/HgQUS/1 出于某种原因,它的行为与它应该做的相反。 那是因为您在 xD 中使用错误 - 您编写的语句检查复选框是否为changed
,因为它设置了 checked
属性,然后运行 if 语句.所以你想要做的只是交换内容。 jsfiddle.net/HgQUS/5。 :3
html规范将checked属性的内容定义为“checked”,而不是“true”:w3.org/TR/html4/interact/forms.html#edef-INPUT
@Aleks - 是的。我在想可能是这样,但我不确定。
@GaretJax,我确实说过我写的第一条语句就是为此而写的,但是我见过(主要是与 Internet Explorer 相关的)checked
属性被用作布尔值的案例。【参考方案5】:
我触发了警报,它对我有用:
<script type="text/javascript">
jQuery('#selectlist input[type=checkbox]').live('click',function()
var select_id = jQuery(this).attr('id');
if(jQuery(this).is(':checked'))
alert('You have checked the checkbox');
// Remove some data from variable
else
alert('You have unchecked the checkbox');
//Add data to variable
);
</script>
【讨论】:
【参考方案6】:你的“if”语法不正确。
jQuery('#selectlist_categories input[type=checkbox]').live('click',function()
var cat_id = jQuery(this).attr('id');
// if the checkbox is not checked then alert "You have unchecked the checkbox"
if(!jQuery(this).is(':checked'))
alert('You have unchecked the checkbox');
else
//else alert "You have checked the checkbox"
alert('You have checked the checkbox');
);
【讨论】:
【参考方案7】:如果您对为什么在检查时显示 unchecked
感到困惑。您的代码没有错误,您只需在警报中将unchecked
和checked
相互切换,如下所示:
$('#selectlist_categories input[type=checkbox]').on('change',function()
var cat_id = $(this).attr('id');
let cat_idText = $("input[type=checkbox]:checked").val();
if(jQuery(this).is(':checked'))
alert('You have checked the checkbox' + " " + `$cat_idText`);
else
alert('You have unchecked the checkbox');
);
PS:我已经更新了脚本以在 jQuery 3.5.1 中工作,原来的
live()
仅适用于 jQuery 1.7,因为它在 中被删除>1.9 改为使用on()
并且在 jQuery 3.5.1 上你可以使用$
而不是jQuery
并且val()
函数适用于所有版本,因为它添加了jQuery 1.0
或者以更好的方式将 if 语句更正为 RickyCheers
表示在 jQuery
或 $
之前添加 !
,然后 if 语句会将其变为如果没有选中 jQuery 元素
$('#selectlist_categories input[type=checkbox]').on('click',function()
var cat_id = $(this).attr('id');
if(!jQuery(this).is(':checked'))
alert('You have unchecked the checkbox');
else
alert('You have checked the checkbox');
);
【讨论】:
以上是关于如何检查单击时是不是选中了复选框?的主要内容,如果未能解决你的问题,请参考以下文章