`
smallratluobin
  • 浏览: 12188 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery操作复选框(checkbox)的12个小技巧总结

 
阅读更多

1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});

3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();

9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});

参考文档:http://www.poluoluo.com/jzxy/201402/261608.html

分享到:
评论

相关推荐

    jquery对复选框(checkbox)的操作汇总

    在jQuery中,对复选框(checkbox)进行操作是常见的前端开发需求,下面将详细介绍标题和描述中提及的12个小技巧以及相关的jQuery选择器和方法。 1. **获取单个选中项**: 使用以下三种方式可以获取选中的复选框的...

    jquery取单选,复选,下拉小结

    这篇博客"jquery取单选,复选,下拉小结"是关于如何使用jQuery来操作网页中的单选按钮(radio)、复选框(checkbox)以及下拉列表(select)的选择项。下面我们将详细探讨这些知识点。 首先,我们来讨论如何使用...

    jquery radio checkbox 美化

    在提供的压缩包文件中,"jQuery.HCheckbox"可能是一个jQuery插件,专门用于复选框和单选按钮的美化。插件通常包含一套完整的样式和交互逻辑,能快速地使这些元素变得现代化且富有吸引力。使用此类插件,只需引入相关...

    文本框 单选框 复选框 下拉框

    3. **复选框**(Checkbox):复选框让用户可以选择多个选项。复选框的美化同样可以通过CSS实现,比如更改选中状态的背景色、边框颜色,甚至使用图标替换来增强视觉效果。此外,可以利用JavaScript或jQuery为复选框...

    单选按钮和复选框按钮

    复选框则不同,它是一个小矩形框,用户可以勾选或取消勾选。复选框用于让用户在一组可多选的选项中进行选择,可以同时选中多个。例如,在订阅服务时,用户可以选择多个兴趣类别,或者在设置中选择要启用的功能。 在...

    checkbox处理

    在IT行业中,"checkbox处理"通常指的是在网页或者应用程序中对复选框(checkbox)进行操作和管理的技术。复选框是用户界面中常见的元素,用于让用户选择一个或多个选项。在HTML、JavaScript、jQuery、Vue.js等前端...

    jQuery实现checkbox列表的全选、反选功能

    然后使用jQuery选择器,根据这个属性值找到所有需要被操作的子复选框,并根据全选复选框的状态,设置子复选框的checked属性。 这种封装方法不仅解决了全选和反选的问题,而且具有良好的扩展性和重用性。通过简单的...

    CSS3复选框和单选按钮美化.zip

    默认情况下,这些元素的样式较为简单,通常由一个小方框(复选框)或圆圈(单选按钮)和旁边的文本组成。 在CSS3中,我们可以利用伪类、属性选择器和自定义字体图标来改变这些元素的外观。例如,我们可以使用`:...

    自定义购物车二级checkbox 全选、单个选择

    在这个场景中,通常会有一个顶层的全选checkbox,以及一系列代表商品的子checkbox,用户可以对单个商品进行选择,或者通过全选按钮一键选中所有商品。这个功能需要考虑浏览器的兼容性,确保在大部分浏览器上都能正常...

    js判断复选框是否选中的方法示例【基于jQuery】

    在Web开发中,复选框(checkbox)是一种常见的表单元素,用于让访问者在多个选项中选择多个项目。使用JS来判断复选框是否被选中是前端开发中的一个基础功能。而jQuery是一个快速、小巧、功能丰富的JavaScript库,它...

    struts2对于checkboxlist的换行

    5. **JavaScript/jQuery**:在客户端使用JavaScript或jQuery进行动态布局,根据窗口大小调整复选框的排列方式。 6. **Struts2插件**:Struts2有一些插件如DisplayTag或Wicket等,它们提供了更丰富的表格和列表渲染...

    带checkbox的下拉框

    在IT界,尤其是在前端开发中,"带checkbox的下拉框"是一种常见的用户界面元素,它结合了传统的HTML `select` 元素和复选框(checkbox)的功能,提供了更丰富的交互体验。这种设计通常用于让用户能够从多个选项中进行...

    JQuery操作textarea,input,select,checkbox方法

    本文将介绍如何使用JQuery来操作Web页面中的几种常见表单元素:textarea(文本域)、input(输入框)、select(下拉选择框)和checkbox(复选框)。 ### 1. 操作textarea textarea是一个多行文本输入控件,用户可以...

    Jquery和angularjs获取check框选中的值的方法汇总

    本文提供了一个小技巧:可以将需要获取的信息全部放入复选框的`value`属性中,如: ```html <input type="checkbox" name="orders" value="{{e.merchantId}},{{e.orderCode}},{{e.userId}}"/> ``` 这样的做法使得...

    jquery easy ui模板

    5. **表单组件**:如输入框(Input)、复选框(Checkbox)、单选按钮(Radio)等,用于收集用户输入。 6. **按钮(Button)**:提供各种类型的按钮,如普通按钮、提交按钮、链接按钮等。 7. **布局(Layout)**:...

    jquery获取多个checkbox的值异步提交给php的方法

    1. jQuery操作页面元素进行异步传输:指的是利用jQuery选择页面上的元素,如复选框,并对这些元素进行操作(例如,获取值),然后将数据异步发送到服务器。 2. 相关技巧:包括如何组织jQuery代码、使用特定的选择器...

    jq分页与选中功能.zip

    在这个"jq分页与选中功能.zip"压缩包中,包含的是两个基于jQuery实现的小功能示例:一个用于实现分页效果,另一个涉及复选框的选中和删除功能。下面我们将详细探讨这两个知识点。 首先,让我们讨论分页功能。在网页...

    轻量级Javript复选框动画插件Checkbix

    【轻量级JavaScript复选框动画插件Checkbix】是一种专为网页设计者和开发者打造的工具,它能够为HTML中的复选框(checkbox)添加动态效果,以提升用户体验和交互性。Checkbix插件的核心优势在于其轻量级的特性,这...

Global site tag (gtag.js) - Google Analytics