jquery批量操作checkbox不生效等问题
平常页面元素简单的时候操作很简单,也不会遇到特殊问题,但是当页面结构复杂的时候,特别是与其他框架混合的时候就会出现意外情况,
<input type="checkbox" id="123">
选中复选框:
$("#123").attr("checked","checked");//或者$("#123").attr("checked",true);
取消复选框:
$("#123").attr("checked",false);//或者$("#123").removeAttr("checked");
但是如果想要批量操作一些复选框,而且不知道这些复选框的ID,而且这些复选框每个外面都会嵌套不同层数的DIV LABEL 等其他页面标签元素,
比如最外层元素是<div id="aa">......
我们通常的写法是
$('#aa').find("input").each(function(){
$(this).attr("checked","checked");//或者$(this).attr("checked",true);
});
上面的写法是没问题的,但是有时候需要在你批量选中一部分复选框之前要先全部取消选中, 这个时候会这样写
$('#aa').find("input").each(function(){
$(this).attr("checked",false);//removeAttr
if(a>b){
$(this).attr("checked","checked");//或者$(this).attr("checked",true);
}
});
但是我这样写出现的问题,不管怎么试都是取消选中生效了,但是后面的批量选中一部分确没生效,就是if(a>b)里面的代码没生效,但是调试时候发现页面元素是有(checked="checked")的,但是页面上就是没有打钩,最后选择用原生JS来操作
$('#aa').find("input").each(function(i, el){
//先进行全部取消操作
//var cid = $(this).attr("id");
//document.getElementById(cid).checked = false;
el.checked = false;//上面注释的两行意思等同于当前这行
//满足条件的话进行选中操作
if(a>b){
//var cid = $(this).attr("id");
//document.getElementById(cid).checked = true;
el.checked = true;
}
});
虽然还是用到了部分jquery的语法,但是选中操作用的是原生JS的写法
document.getElementById(cid).checked = true;
分享到:
相关推荐
本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...
在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理...无论是单个checkbox的控制还是批量操作,jQuery都能轻松应对。通过熟练掌握这些技巧,开发者可以创建更加动态和用户友好的网页应用。
jQuery 对checkbox的操作
本篇文章将深入探讨如何使用jQuery来操作checkbox元素,包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中,我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理和动画效果变得更加便捷。对于“jQuery的checkbox样式”,这是一个关注于提升网页中复选框...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 ...
在本教程中,我们将深入探讨如何使用jQuery来操作checkbox元素,特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先,让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素,用于让用户对一...
昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个
在Web开发中,特别是在表单处理方面,经常会遇到需要实现多个复选框(CheckBox)的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验,还能简化前端的数据处理流程。本文通过具体的示例代码介绍了...
通过以上分析,我们可以看出“jquery模拟div多选checkbox下拉框”是一个结合了jQuery、DOM操作、事件处理、CSS定制和数据管理的综合性组件。开发者在使用这个压缩包中的`selectbox`文件时,只需按照提供的API和示例...
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互。本文将深入探讨如何在jQuery环境下实现输入框(input)复选框(checkbox)的联动效果,即当某个复选框被选中时,...
### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...
jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...
这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...
**绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...
JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
"Jquery全选反选Checkbox"是一个常见的功能需求,特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件,让用户能够快速地对一组复选框进行全选或反选操作。 首先...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。在本文中,我们将深入探讨如何使用jQuery来获取checkbox选中的值,包括全选、取消全选、反选以及选中奇数行的...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何使用jQuery来操作HTML中的checkbox和select元素,这两个元素在网页表单中十分常见。 ...