checkbox全选和取消功能

这是开发中常见的小功能,想当初我也曾对于attr和prop的不了解踩过坑。

前端工作中,常常会使用到select复选框,select复选框有一个属性checked,当使用js或者jquery控制这个属性的时候,我们会发现有时候设置attr(‘checked’)并没有效果,可是代码明明没有问题。这时候我们应该来聊聊attr了,attr相当于getAttribute,只能操作页面上存在的属性,当复选框没有被选中时,页面上是没有checked的这个属性的,因此attr操作无效。还有一个操作属性的方法prop(),可以操作页面上没有显示的属性。

$("#check_all").click(function(){

if($(this).is(":checked")){

$(".ck").prop("checked", ‘true‘);

}else{

$(".ck").removeAttr("checked");

}

});

注意:这里如果将prop改成attr结果只能实现一次全选和取消,

.attr(“”)相当于elem.getAttribute(),如果也页面中没有明确表明属性和属性值用这个是取不到的;

.prop(“”)相当于elem.属性名,可操作内存中的属性值。

时间: 2024-08-08 05:43:02

checkbox全选和取消功能的相关文章

jQuery --checkbox全选和取消全选简洁高效的解决办法

最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二. html代码如下: <fieldset data-role="controlgroup">  <label><input type="checkbox" name="boxes" id="select_al

JS对checkbox全选和取消全选

需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/> <input type="file" id="File1" name=&q

datagridview里面的checkbox全选和取消全选

全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridview中的每一行,判断是否选中,若为选中,则选中 for (int i = 0; i < dataGridView1.Rows.Count; i++) { if ((Convert.ToBoolean(dataGridView1.Rows[i].Cells[0].Value) == false))

checkbox全选和反选功能

用jQuery实现checkbox的全选和反选功能,当checkbox禁用时候不参与全选功能 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,inp

Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </h

checkbox 全选和取消

//全选 $("#checkall").click(function () { if (this.checked) { //如果当前点击的多选框被选中 $('input[type=checkbox][name=checkitems]').prop("checked", true); } else { $('input[type=checkbox][name=checkitems]').prop("checked", false); } }); /

angular checkbox 全选和反选功能

最近做写出了angularjs 全选和反选的数据绑定功能,分享出来给大家,有什么不对的地方请大家多多指教,angularjs 强大的数据绑定功能完全展现了新一代的web 开发的,完美的和html 应用在一起,实现新一代的技术完美结合.废话就不多说了,下面看代码: 1.html 页面: <table class="table" >    <!--主机组主机列表-->    <tr style="background-color: #555555;c

比较全的JS checkbox全选、取消全选、删除功能代码

JS checkbox 方法一: 复制代码代码如下: function checkAll() { var code_Values = document.all['code_Value']; if(code_Values.length){ for(var i=0;i<code_Values.length;i++) { code_Values[i].checked = true; } }else{ code_Values.checked = true; } } function uncheckAll

全选、取消、2级 checkbox的选中切换

需求:点击父级checkbox的时候,子级出现全选或全取消:点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中:如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未选中状态: HTML代码: <dl class="set-list"> <dt> <input type="checkbox" name="plateName" value="18" checked&