`
15000346240
  • 浏览: 17820 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery批量操作checkbox不生效等问题

阅读更多
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元素。...

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    jquery 对checkbox的操作

    在IT领域,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理...无论是单个checkbox的控制还是批量操作,jQuery都能轻松应对。通过熟练掌握这些技巧,开发者可以创建更加动态和用户友好的网页应用。

    jQuery 对checkbox的操作

    jQuery 对checkbox的操作

    jQuery操作checkbox

    本篇文章将深入探讨如何使用jQuery来操作checkbox元素,包括多选、全选和反选等常见功能。 一、jQuery选择checkbox 在jQuery中,我们可以使用`$('input[type="checkbox"]')`选择所有的checkbox。如果你想根据特定...

    jquery 的checkbox样式

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理和动画效果变得更加便捷。对于“jQuery的checkbox样式”,这是一个关注于提升网页中复选框...

    jquery checkbox 选中 取消 checkbox多选

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互等任务。本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 ...

    jquery之checkbox操作(v1.0.0)

    在本教程中,我们将深入探讨如何使用jQuery来操作checkbox元素,特别是动态生成、设置显示数量以及获取选中项等核心知识点。 首先,让我们了解checkbox的基本概念。Checkbox是HTML中的一个表单元素,用于让用户对一...

    jquery 设置select checkbox radio只读

    昨天网上找了很多关于设置select checkbox radio只读的,都没办法满足要求,自己写了一个

    jQuery制作全选CheckBox

    在Web开发中,特别是在表单处理方面,经常会遇到需要实现多个复选框(CheckBox)的“全选”、“反选”等功能的需求。这样的功能不仅可以提升用户体验,还能简化前端的数据处理流程。本文通过具体的示例代码介绍了...

    jquery模拟div多选checkbox下拉框

    通过以上分析,我们可以看出“jquery模拟div多选checkbox下拉框”是一个结合了jQuery、DOM操作、事件处理、CSS定制和数据管理的综合性组件。开发者在使用这个压缩包中的`selectbox`文件时,只需按照提供的API和示例...

    jquery input checkbox 联动

    在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理以及Ajax交互。本文将深入探讨如何在jQuery环境下实现输入框(input)复选框(checkbox)的联动效果,即当某个复选框被选中时,...

    jquery、js操作checkbox全选反选.docx

    ### jQuery与JavaScript操作Checkbox全选反选 #### 一、引言 在Web开发中,Checkbox(复选框)是一种非常常见的用户界面元素,用于收集用户的多选输入。尤其是在表单设计时,Checkbox的全选与反选功能极大地方便了...

    jQuery的高性能TreeView源码(带CheckBox)

    jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...

    jquery操作Radio、Checkbox、Select Demo

    这些是jQuery对Radio、Checkbox和Select基本的操作方式。在实际应用中,你可能还需要结合DOM遍历、事件冒泡等知识,实现更复杂的交互功能。提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深...

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...

    JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    Jquery全选反选Checkbox

    "Jquery全选反选Checkbox"是一个常见的功能需求,特别是在需要用户批量选择或取消选择多个选项的场景下。这个功能通常应用于表格、列表或其他数据展示组件,让用户能够快速地对一组复选框进行全选或反选操作。 首先...

    jquery获取checkbox选中的值

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互等任务。在本文中,我们将深入探讨如何使用jQuery来获取checkbox选中的值,包括全选、取消全选、反选以及选中奇数行的...

    jquery 操作checkbox 和select

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何使用jQuery来操作HTML中的checkbox和select元素,这两个元素在网页表单中十分常见。 ...

Global site tag (gtag.js) - Google Analytics