如何检查jQuery中是否已选中复选框?
我需要检查复选框的checked
属性,并使用jQuery根据checked属性执行操作。
例如,如果选中了年龄复选框,那么我需要显示一个文本框来输入年龄,否则隐藏该文本框。
但是以下代码默认情况下返回false
:
if ($('#isAgeSelected').attr('checked')) { $("#txtAge").show(); } else { $("#txtAge").hide(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none"> Age is selected </div>
如何成功查询checked
属性?
#1楼
从jQuery 1.6开始, jQuery.attr()
的行为已更改,并鼓励用户不要使用它来检索元素的选中状态。 相反,您应该使用jQuery.prop()
:
$("#txtAge").toggle($("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;// Return value changes with checkbox state
);
其他两种可能性是:
$("#txtAge").get(0).checked
$("#txtAge").is(":checked")
#2楼
最重要的答案对我没有帮助。 虽然这样做:
<script type="text/javascript">$(document).ready(function(){$("#li_13").click(function(){if($("#agree").attr('checked')){$("#saveForm").fadeIn();}else{$("#saveForm").fadeOut();}});});
</script>
基本上,当单击元素#li_13时,它将使用.attr('checked')
函数检查是否已#同意元素(即复选框)。 如果是,则淡入#saveForm元素;如果不是,则淡出saveForm元素。
#3楼
如果使用的是jquery的更新版本,则必须使用.prop
方法来解决问题:
$('#isAgeSelected').prop('checked')
如果选中则返回true
,如果未选中则返回false
。 我确认了这一点,并且较早地遇到了这个问题。 $('#isAgeSelected').attr('checked')
和$('#isAgeSelected').is('checked')
返回undefined
,对于这种情况,这不是一个有价值的答案。 因此,请执行以下操作。
if($('#isAgeSelected').prop('checked')) {$("#txtAge").show();
} else {$("#txtAge").hide();
}
希望对您有所帮助:)-谢谢。
#4楼
我正在使用这个:
<input type="checkbox" id="isAgeSelected" value="1" /> <br/><input type="textbox" id="txtAge" />$("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
#5楼
采用:
<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad
$('input#abc').click(function(){if($(this).is(':checked')){var checkedOne=$(this).val()alert(checkedOne);// Do some other action}
})
如果您希望仅在选中此框时才需要执行所需的操作,而不是在删除该复选框时才有帮助。
#6楼
1)如果您的HTML标记是:
<input type="checkbox" />
使用的attr:
$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set
如果使用道具:
$(element).prop("checked"); // Will give you false whether or not initial value is set
2)如果您的HTML标记是:
<input type="checkbox" checked="checked" />// May be like this also checked="true"
使用的attr:
$(element).attr("checked") // Will return checked whether it is checked="true"
使用的道具:
$(element).prop("checked") // Will return true whether checked="checked"
#7楼
此示例用于按钮。
请尝试以下操作:
<input type="button" class="check" id="checkall" value="Check All" /> <input type="button" id="remove" value="Delete" /> <br/><input type="checkbox" class="cb-element" value="1" /> Checkbox 1 <br/>
<input type="checkbox" class="cb-element" value="2" /> Checkbox 2 <br/>
<input type="checkbox" class="cb-element" value="3" /> Checkbox 3 <br/>$('#remove').attr('disabled', 'disabled'); $(document).ready(function() { $('.cb-element').click(function() {if($(this).prop('checked')){$('#remove').attr('disabled', false);}else{$('#remove').attr('disabled', true);}}); $('.check:button').click(function()
{var checked = !$(this).data('checked');$('input:checkbox').prop('checked', checked);$(this).data('checked', checked);if(checked == true){$(this).val('Uncheck All');$('#remove').attr('disabled', false);}else if(checked == false){$(this).val('Check All');$('#remove').attr('disabled', true);}
});
});
#8楼
jQuery 1.6以上
$('#isAgeSelected').prop('checked')
jQuery 1.5及以下
$('#isAgeSelected').attr('checked')
任何版本的jQuery
// Assuming an event handler on a checkbox
if (this.checked)
一切归功于西安 。
#9楼
有很多检查复选框是否选中的方法:
使用jQuery进行检查的方法
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
检查示例或文档:
http://api.jquery.com/attr/
http://api.jquery.com/prop/
#10楼
$(document).ready(function() { $('#agecheckbox').click(function() {if($(this).is(":checked")){$('#agetextbox').show();} else {$('#agetextbox').hide();}});
});
#11楼
切换:0/1否则
<input type="checkbox" id="nolunch" />
<input id="checklunch />"$('#nolunch').change(function () {if ($(this).is(':checked')) {$('#checklunch').val('1');};if ($(this).is(':checked') == false) {$('#checklunch').val('0');};
});
#12楼
我认为这将是简单的
$('#isAgeSelected').change(function() {if($(this).is(":checked")) {$('#txtAge').show();}
else{$('#txtAge').hide();}
});
#13楼
虽然你已经提出了一个JavaScript解决方案为您的问题(显示textbox
时, checkbox
被checked
),这个问题可能只是CSS来解决。 通过这种方法,您的表单适用于禁用JavaScript的用户。
假设您具有以下HTML:
<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />
您可以使用以下CSS来实现所需的功能:
#show_textbox:not(:checked) + input[type=text] {display:none;}
对于其他情况,您可能会想到合适的CSS选择器。
这是一个小提琴来演示这种方法 。
#14楼
这是执行相同操作的一些不同方法:
$(document).ready(function (){ $('#isAgeSelected').click(function() { // $("#txtAge").toggle(this.checked); // Using a pure CSS selector if ($(this.checked)) { alert('on check 1'); }; // Using jQuery's is() method if ($(this).is(':checked')) { alert('on checked 2'); }; // // Using jQuery's filter() method if ($(this).filter(':checked')) { alert('on checked 3'); }; }); });
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none">Age is something</div>
#15楼
我正在使用此,这绝对正常:
$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");
注意:如果选中此复选框,它将返回true,否则未定义,因此最好检查“ TRUE”值。
#16楼
您可以使用:
if(document.getElementById('isAgeSelected').checked)$("#txtAge").show(); else$("#txtAge").hide();
if($("#isAgeSelected").is(':checked'))$("#txtAge").show();
else$("#txtAge").hide();
他们两个都应该工作。
#17楼
用这个:
if ($('input[name="salary_in.Basic"]:checked').length > 0)
如果选中此复选框,则长度大于零。
#18楼
采用:
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned$("#planned_checked").change(function() {if($(this).prop('checked')) {alert("Checked Box Selected");} else {alert("Checked Box deselect");}
});
$("#planned_checked").change(function() { if($(this).prop('checked')) { alert("Checked Box Selected"); } else { alert("Checked Box deselect"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned
#19楼
此代码将帮助您
$('#isAgeSelected').click(function(){console.log(this.checked);if(this.checked == true) {$("#txtAge").show();} else {$("#txtAge").hide();}
});
#20楼
我遇到了完全相同的问题。 我有一个ASP.NET复选框
<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />
在jQuery代码中,我使用了以下选择器来检查该复选框是否已选中,并且看起来像是一种魅力。
if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
我确定您也可以使用ID代替CssClass,
if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }
我希望这可以帮助你。
#21楼
这对我有用:
/* isAgeSelected being id for checkbox */$("#isAgeSelected").click(function(){$(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});
#22楼
使用jQuery的is()函数:
if($("#isAgeSelected").is(':checked'))$("#txtAge").show(); // checked
else$("#txtAge").hide(); // unchecked
#23楼
使用jQuery> 1.6
<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true
使用新的属性方法:
if($('#checkMeOut').prop('checked')) {// something when checked
} else {// something else when not
}
#24楼
将Click
事件处理程序用于checkbox属性是不可靠的,因为在执行事件处理程序本身的过程中, checked
属性可能会更改!
理想情况下,你会希望把你的代码放到一个change
的事件处理程序,例如它被激发每个复选框的值发生改变时(独立于它是如何做的话)。
$('#isAgeSelected').bind('change', function () {if ($(this).is(':checked'))$("#txtAge").show();else$("#txtAge").hide();
});
#25楼
如何成功查询选中的属性?
复选框DOM元素的checked
属性将为您提供该元素的checked
状态。
给定您现有的代码,您可以执行以下操作:
if(document.getElementById('isAgeSelected').checked) {$("#txtAge").show();
} else {$("#txtAge").hide();
}
但是,使用toggle
可以有一种更漂亮的方法:
$('#isAgeSelected').click(function() { $("#txtAge").toggle(this.checked); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none">Age is something</div>
#26楼
我相信您可以这样做:
if ($('#isAgeSelected :checked').size() > 0)
{$("#txtAge").show();
} else { $("#txtAge").hide();
}
#27楼
这为我工作:
$get("isAgeSelected ").checked == true
其中isAgeSelected
是控件的ID。
另外,@ karim79的答案也很好。 我不确定测试时错过了什么。
注意,这是使用Microsoft Ajax而不是jQuery的答案
#28楼
我的方法是:
if ( $("#checkbox:checked").length ) { alert("checkbox is checked");
} else {alert("checkbox is not checked");
}
#29楼
$(selector).attr('checked') !== undefined
如果选中了输入,则返回true
否则,返回false
。
#30楼
我决定发布一个答案,说明如何在没有jQuery的情况下执行相同的操作。 只是因为我是反叛者。
var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');// Just because of IE <333
ageCheckbox.onchange = function() {// Check if the checkbox is checked, and show/hide the text field.ageInput.hidden = this.checked ? false : true;
};
首先,您将通过它们的ID获得这两个元素。 然后,为复选框的onchange
事件分配一个函数,该函数检查复选框是否已选中,并适当设置年龄文本字段的hidden
属性。 在该示例中,使用三元运算符。
这是一个小提琴供您测试。
附录
如果跨浏览器兼容性是一个问题,那么我建议将CSS display
属性设置为none和inline 。
elem.style.display = this.checked ? 'inline' : 'none';
较慢但跨浏览器兼容。
如何检查jQuery中是否已选中复选框?相关推荐
- 检查是否已使用jQuery选中复选框
如何检查是否使用复选框数组的ID选中了复选框数组中的复选框? 我正在使用以下代码,但是无论ID为何,它始终返回已选中复选框的数量. function isCheckedById(id) {alert( ...
- 使用jquery检查/取消选中复选框? [重复]
本文翻译自:check / uncheck checkbox using jquery? [duplicate] This question already has an answer here: 这 ...
- jQuery如果选中复选框
本文翻译自:jQuery if checkbox is checked I have a function below that I want to only trigger when a check ...
- 使用JavaScript(jQuery或Vanilla)选中/取消选中复选框?
本文翻译自:Check/Uncheck checkbox with JavaScript (jQuery or Vanilla)? 如何使用JavaScript,jQuery或vanilla选中/取消 ...
- jQuery实现获取选中复选框的值
应用场景: 我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等).我们可以在每个列表项后面加一个删除按钮,把列表项的 相关参数(如 id)post到后台进行删除.当然如果 ...
- 检查字典中是否已存在给定键
我想在更新密钥值之前测试字典中是否存在密钥. 我写了以下代码: if 'key1' in dict.keys():print "blah" else:print "boo ...
- jq多选按钮值_jQuery实现获取选中复选框的值实例详解
应用场景: 我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等).我们可以在每个列表项后面加一个删除按钮,把列表项的相关参数(如 id)post到后台进行删除.当然如果你 ...
- el-checkbox点击后面的内容不选中复选框
提出需求:要求点击后面的tag前面复选框不选中 思考:把后面的内容移出checkbox标签内,尝试后发现因为循环和样式问题不可取. 查百度都是点击后面的内容选中复选框.于是想反向思考,看了Elemen ...
- 判定是否在词典中 java_检查字典中是否已存在给定键
回答(19) 2 years ago 有关接受答案的建议方法(10米循环)的速度执行的其他信息: 'key' in mydict 经过时间1.07秒 mydict.get('key') 经过时间1.8 ...
最新文章
- IIS6.0打开ASP文件,出现500错误或404错误解决方法
- java txtreader_一个简单的Java读写文件例子
- 2021-05-10 矩阵AB和矩阵BA有什么联系?
- CentOS7 配置ISCSI targetcli 共享存储
- OpenCV向JNI层的参数转换
- php 图片 3d旋转图片,html5实现图片的3D旋转效果
- 尝试实现手势控制计算机(持续跟进)
- php脚本日志文件,php脚本-定期删除日志文件,删除历史日志 保留最近7天
- python 判断 字串包含_Python变量
- 【锂电】锂电工艺大全
- java继承和接口的区别_java中的接口与继承的区别
- 【YOLOV5-5.x 源码解读】datasets.py
- Jzoj4699 Password
- IT人必读的10个小故事
- 干果进口关税是多少天津食品进口应办理哪些手续?
- el-input 密码输入框 显示隐藏优化
- 长大后才知道,成年人的哭原来没有声音
- [附源码]Java计算机毕业设计SSM高校互联网班级管理系统
- Java DTO(data transfer object)的理解,为什么要用DTO
- 百度地图的开发者模式
热门文章
- Android Service、 BroadcastReceiver、ContentProvider ANR 原理详解
- Android使用Glide加载Gif.解决Glide加载Gif非常慢问题
- 一文看懂鸿蒙手机操作系统。和安卓、iOS 有何区别?
- CMD命令操作MySql数据库详解
- Android 10.0 PackageManagerService(一)工作原理及启动流程-[Android取经之路]
- git远程仓库回退版本
- netstat -ano 查看机器端口占用情况
- java如何保存初始化数据_java – 如何在JUnit测试中初始化数据
- 卷积的定义及其物理意义_高等数学入门——高阶导数的定义及其物理意义
- mybatis 一对多查询_Java自学之mybatis:使用注解方式多对一查询