`

checkbox系列

    博客分类:
  • CSS
阅读更多

1.解决checkbox属性checked为true但是未被选中的问题(转)

原来是jQuery版本问题。

 

Attributes vs. Properties

 

attributesproperties之间的差异在特定情况下是很重要。jQuery 1.6之前 ,.attr()方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始, .prop()方法 方法返回 property 的值,而.attr() 方法返回 attributes 的值。

例如, selectedIndextagNamenodeNamenodeTypeownerDocumentdefaultChecked, 和 defaultSelected应使用.prop()方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()方法取得,但是这并不是元素的attr属性。他们没有相应的属性(attributes),只有特性(property)。

 $(function(){  

  

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

                if(this.checked){  

                    $(".checkbox input[type=checkbox]").prop("checked",true);  

                }else{  

                    $(".checkbox input[type=checkbox]").prop("checked",false);  

                }  

            });  

  

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

                var back = $(".checkbox input[type=checkbox]");  

                back.each(function(){  

                    console.log(this.checked);  

                    if( this.checked ){  

                        $(this).prop("checked",false);  

                    }else{  

                        $(this).prop("checked",true);  

                    }  

                      

                });  

            });  

 

        })  

 

2.复选框样式修改方法(转)

复选框checkbox的默认样式很难看,以前一直没有改过,现在查到很多资料,发现利用图片+css3改变复选框是最简单的方法;代码如下

input[type="checkbox"] {
  -webkit-appearance: none;  /*清除复选框默认样式*/
  background#fff url(i/blue.png);   /*复选框的背景图,就是上图*/
  height22px;   /*高度*/
  vertical-alignmiddle;
  width22px;
}
input[type="checkbox"]:checked {
  background-position-48px 0;
}
使用jQuery获取获取select下拉框中option的值:
//通过绑定change事件,当下拉框内容发生变化时事件被启动 $("#wlms").bind("change",function(){//获取被选中的option的值var miaoshu = $(this).val(); //获取自定义属性的值var bianhao = $(this).find("option:selected").attr("bianhao"); });
其中获取自定义属性的值部分,在HTML中部分是:
...... <option bianhao="abc"></option> ......
 

4.jQuery判断checkbox是否选中的3种方法
转:具体差异待研究)

方法一:
if ($("#checkbox-id")get(0).checked) {
    // do something
}

方法二:
if($('#checkbox-id').is(':checked')) {
    // do something
}

 

方法三:
if ($('#checkbox-id').attr('checked')) {
    // do something
}

分享到:
评论

相关推荐

    费斯托 紧凑型Checkbox产品简介.pdf

    此外,Checkbox系列产品的性价比极高,能够帮助用户降低设备投资成本,同时保证了生产效率和质量。 在生产过程中,Checkbox能够对小零件进行非接触式识别、定向检测和质量检验,确保工件能持续平稳地传送。它支持三...

    Asp.net CheckBoxList操作集合

    在ASP.NET Web Forms开发中,CheckBoxList控件是一种常用的选择组件,它允许用户从一系列选项中选择一个或多个项目。本篇文章将详细讲解如何进行CheckBoxList的操作,包括获取选中项、实现全选、取消选中以及反选...

    Android2.2 r1 API 中文文档系列(10) —— CheckBox

    ### Android2.2 r1 API 中文文档系列(10)—— CheckBox #### 知识点一:CheckBox组件概述 **CheckBox** 是一种常见的UI控件,在用户界面设计中广泛用于表示二进制的选择(选中或未选中)。它是`CompoundButton`...

    遍历CheckBoxList,获得选中项的值动态绑定CheckBoxList代码

    CheckBoxList 控件在页面上呈现为一系列复选框,每个复选框代表一个选项。它非常适合用于用户需要进行多选的情况,比如选择兴趣爱好、技能等。 #### 知识点二:CheckBoxList的数据绑定 在ASP.NET Web Forms中,**...

    Flex动态生成checkbox组

    "Flex动态生成checkbox组"这个主题,就是关于如何在Flex应用中利用代码动态创建并管理一系列的Checkbox组件。 Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。在Flex中,我们可以...

    Flex Tree 中Checkbox

    它由一系列可展开或折叠的节点组成,每个节点可以包含子节点。用户可以通过单击节点来展开或折叠它们,查看其子节点。 2. **Checkbox集成**:在Flex Tree中添加Checkbox,通常是为了提供多选功能。这需要自定义...

    改变checkbox样式插件

    然后,插件会提供一系列预定义的样式供选择,或者你可以自定义样式。预定义的样式通常包括多种主题,如扁平化、圆形、线性等,只需将对应的类名添加到checkbox的父元素上即可应用。例如,如果想使用"圆形"样式,可以...

    CheckBoxList的用法

    `CheckBoxList`是ASP.NET Web Forms框架中的一个控件,它允许用户从一系列复选框中进行选择。这些复选框通常用来收集用户的选择偏好或者多选数据。与普通的单个复选框不同,`CheckBoxList`提供了一个方便的方式来...

    easyui checkbox +全选

    EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助开发者快速构建用户界面。在 Web 应用中,全选功能常常用于表格或列表,允许用户一键选择所有项目,提高操作效率。 ...

    多选下拉的CheckBoxList

    在HTML渲染后,CheckBoxList会显示为一系列的`&lt;input type="checkbox"&gt;`元素。 2. **创建CheckBoxList** 在ASP.NET Web Forms中,我们首先需要在页面的`.aspx`文件中添加CheckBoxList控件,像这样: ```html ...

    checkbox 图片 兼容 JQ

    同时,确保jQuery版本不高于IE停止支持的版本,通常是jQuery 1.x系列。 总结来说,"checkbox 图片 兼容 JQ"的实践主要涉及HTML、CSS和jQuery的结合使用,目的是提升用户体验,同时解决旧版浏览器的兼容性问题。...

    CheckBoxListView

    CheckBoxListView是一种特定实现的列表视图,它在Android开发中被用于展示一系列可选择的项目。这个组件在设计时特别考虑了用户体验,确保用户在浏览列表时,每次只能选择一个条目的CheckBox,防止多选冲突,并且...

    天轰穿系列教程之-33单选按纽和复选框RadioButton CheckBox

    天轰穿系列教程之-33单选按纽和复选框RadioButton CheckBox天轰穿系列教程之-33单选按纽和复选框RadioButton CheckBox天轰穿系列教程之-33单选按纽和复选框RadioButton CheckBox天轰穿系列教程之-33单选按纽和复选框...

    免费下载 CheckBoxList遍历 方法

    `CheckBoxList`非常适用于需要收集用户兴趣、偏好或从一系列选项中进行多选的情况。例如,在注册表单中让用户选择他们感兴趣的活动类别,或者在一个调查问卷中让用户选择他们喜欢的功能等场景下都非常有用。 ### ...

    jquery之checkbox操作(v1.0.0)

    Checkbox是HTML中的一个表单元素,用于让用户对一系列选项进行多选。通过`&lt;input type="checkbox" /&gt;`标签创建。在jQuery中,我们通常通过选择器来定位这些元素,然后应用各种方法来操纵它们。 **动态生成checkbox*...

    flex Datagrid checkbox全选

    Datagrid由一系列DataGridColumn组成,每个列可以自定义渲染器来呈现不同类型的数据显示,例如文本、图片或者在这里我们需要的checkbox。全选功能通常通过在Datagrid的表头添加一个可点击的checkbox来实现,当用户...

    CheckBoxList全选反选添加删除

    在Android开发中,CheckBoxList是一种常见的用户界面组件,它结合了ListView和CheckBox的功能,用于展示一系列可选择的项目。在本教程中,我们将探讨如何在Android应用中实现CheckBoxList的全选、反选以及添加删除...

    Android Expandablelistview +CheckBox

    在`ExpandableListView`中,数据通常以`ExpandableListAdapter`的形式存在,它包含两部分:一组数据(Group)和每个组内的一系列子数据(Child)。我们可以创建两个类,一个表示组(Group),另一个表示子项(Child...

    checkBox全选功能

    首先,HTML部分会包含一个主的全选CheckBox和一系列待选的CheckBox: ```html &lt;input type="checkbox" id="selectAll"&gt; 全选 &lt;input type="checkbox" class="item" value="1"&gt; 选项1 &lt;input type="checkbox" ...

Global site tag (gtag.js) - Google Analytics