【jquery】checkbox选中事件

秒速五厘米 2022-08-14 02:55 250阅读 0赞

查了一下貌似用最新的或者版本较高的jquery 请用下面的代码获取是否是选中

$('#checkboxId').is(':checked')

或者用

$('#checkboxId').attr('checked') =="checked"    关于这一条 根据jquery版本的不同会出现验证不出来的情况

今天用到了动态调整checkbox:

首先得知道javascript中property 和attribute的区别： [http://www.cnblogs.com/wangfupeng1988/p/3631853.html][http_www.cnblogs.com_wangfupeng1988_p_3631853.html]  这个链接还有其他的内容 也可以学习下

查了jquery API 资料如下：

大概翻译一下：

** 原文:**As of jQuery 1.6, the `.attr()` method returns `undefined` for attributes that have not been set. To retrieve and change DOM properties such as the `checked`, `selected`, or `disabled` state of form elements, use the [.prop()][.prop] method.

译: 对于1.6版本的jquery .attr()方法返回的是undefined 若没有设置attributes的话.要想获得和改变类似checked selected disabled 表单状态元素,请使用prop()方法

#### Attributes vs. Properties ####

属性  vs 值

原文:The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the `.attr()`method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the `.prop()` method provides a way to explicitly retrieve property values, while `.attr()`retrieves attributes.

译 :值和属性有一定区别,在特定的情况下会产生不同的效果.在jquery 1.6版本之前当用,attr()获取属性的时候有时候会获取到property值,这个动作会产生不寻常的结果.在jquery1,6版本下,prop()能够精确的获取到值,attr() 能够获得属性值。

原文:For example, `selectedIndex`, `tagName`, `nodeName`, `nodeType`, `ownerDocument`, `defaultChecked`, and `defaultSelected`should be retrieved and set with the `.prop()` method. Prior to jQuery 1.6, these properties were retrievable with the `.attr()`method, but this was not within the scope of `attr`. These do not have corresponding attributes and are only properties.

译:举例来说,`selectedIndex`, `tagName`, `nodeName`, `nodeType`, `ownerDocument`, `defaultChecked`, and `defaultSelected 若想获得这些值,请用prop方法.在jquery1.6版本之前.这些值可以通过attr()方法获得,但是实际上这不是在attr()获取范围之内，这仅仅是与值property相关,与attribtes没啥关系`

原文:Concerning boolean attributes, consider a DOM element defined by the HTML markup `<input type="checkbox" checked="checked" />`, and assume it is in a JavaScript variable named `elem`:

译：我们来考虑布尔属性值,由<input type="checkbox" check="checked">假设 该input元素该用js变量elem命名.下面的操作都是按照这个input表单元素来操作的。

操作方式                                               操作结果

<table style="border-collapse:collapse; border-spacing:0px; margin:1em 2em; color:rgb(51,51,51); font-family:'Helvetica Neue',HelveticaNeue,Helvetica,Arial,sans-serif; font-size:15px; line-height:22.5px"> 
 <tbody style=""> 
  <tr style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(102,102,102)"> 
   <th style="font-family:klavika-web,'Helvetica Neue',Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">elem.checked</code></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">true</code>&nbsp;(Boolean) Will change with checkbox state &nbsp; &nbsp; &nbsp;返回结果布尔类型, 会随着checkbox状态改变会改变</td> 
  </tr> 
  <tr style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(102,102,102)"> 
   <th style="font-family:klavika-web,'Helvetica Neue',Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).prop( "checked" )</code></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">true</code>&nbsp;(Boolean) Will change with checkbox state &nbsp; &nbsp; &nbsp;返回结果布尔类型,会随着checkbox状态改变会改变</td> 
  </tr> 
  <tr style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(102,102,102)"> 
   <th style="font-family:klavika-web,'Helvetica Neue',Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">elem.getAttribute( "checked" )</code></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">"checked"</code>&nbsp;(String) Initial state of the checkbox; does not change &nbsp; &nbsp; &nbsp;<br> 返回结果字符串类型, 返回的是checkbox的初始化状态,并且结果不会变化</td> 
  </tr> 
  <tr style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(102,102,102)"> 
   <th style="font-family:klavika-web,'Helvetica Neue',Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).attr( "checked" )</code>&nbsp;<span style="color:rgb(109,109,109)">(1.6)</span></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">"checked"</code>&nbsp;(String) Initial state of the checkbox; does not change<br> &nbsp;Jquery 1.6版本,返回结果字符串类型,返回的checkbox的初始化状态,并且结果不会变化</td> 
  </tr> 
  <tr style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(102,102,102)"> 
   <th style="font-family:klavika-web,'Helvetica Neue',Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).attr( "checked" )</code>&nbsp;<span style="color:rgb(109,109,109)">(1.6.1+)</span></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">"checked"</code>&nbsp;(String) Will change with checkbox state<br> &nbsp; jquery 1.6.1 版本以上,返回结果字符窜类型,返回的是checkbox的选中状态.&nbsp;</td> 
  </tr> 
  <tr style="border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:rgb(102,102,102)"> 
   <th style="font-family:klavika-web,'Helvetica Neue',Helvetica,Arial,Geneva,sans-serif; padding:0.5em"> <code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">$( elem ).attr( "checked" )</code>&nbsp;<span style="color:rgb(109,109,109)">(pre-1.6)</span></th> 
   <td style="padding:0.5em"><code style="white-space:pre-wrap; word-wrap:break-word; font-size:13px; line-height:16px; padding:0px 3px; font-family:source-code-pro,Consolas,monospace!important">true</code>&nbsp;(Boolean) Changed with checkbox state &nbsp;&nbsp;<br> jquery 1.6.1版本一下,返回结果字符串类型,返回的是checkbox的状态，随着checkbox转改改变会改变</td> 
  </tr> 
 </tbody> 
</table>

原文:According to the [W3C forms specification][], the `checked` attribute is a [boolean attribute][], which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.

译:按照w3c特殊说明,checked这个属性是一个布尔类型的属性,这意味着即使 这个属性只要出现---甚至比如  没有设定值或者空字符串 更甚设置为false,那么它的属性值就为true

原文:Nevertheless, the most important concept to remember about the `checked` attribute is that it does not correspond to the `checked` property. The attribute actually corresponds to the `defaultChecked` property and should be used only to set theinitial value of the checkbox. The `checked` attribute value does not change with the state of the checkbox, while the `checked`property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

译：尽管如此,关于checked【属性】需要记住最重要的一点就是它和checked值并不同.这个属性实际上对应的是defaultChecked这个dom内置值.并且只是用于checkbox的初始化状态 这个动作中.  The `checked` attribute value does not change with the state of the checkbox,看这一句话:check属性值【通过attr()设置和获取】并不会改变checkbox的状态值.而checked值【通过prop()设置 和获取】却可以做到。 因此在考虑浏览器兼容性的前提下去制定checkbox选中状态的方式就是用**值而不是属性:**

*  `if ( elem.checked )`
 *  `if ( $( elem ).prop( "checked" ) )`
 *  `if ( $( elem ).is( ":checked" ) )`

原文:The same is true for other dynamic attributes, such as `selected` and `value`.

译:其他动态属性比如 selected 和value 同样适用.

结论：说白了动态改变checkbox状态 1.要么适用js原生属性 .  jsObj.checked=true;

2,适用Juqery操作checked值,通过prop('checked',false);来实现

[http_www.cnblogs.com_wangfupeng1988_p_3631853.html]: http://www.cnblogs.com/wangfupeng1988/p/3631853.html
[.prop]: http://api.jquery.com/prop/
[W3C forms specification]: http://www.w3.org/TR/html401/interact/forms.html#h-17.4
[boolean attribute]: http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2