`

Checkbox的checked属性问题

IEFirefoxJavaScriptOpera脚本 
阅读更多

转自：http://www.cnblogs.com/net205/archive/2008/08/31/1280432.html

 

　　前几天开发中用Javascript脚本创建Checkbox时，发现设置checked属性有问题，后来测试得到设置checked属性在IE,Firefox,Opera中存在差异。

 

　　　我们先来看一下网上搜索到的例子。

　　1、Internet Explorer 6 and the checked checkbox

　　　http://claudio.cicali.org/article/90/ie-6-and-the-checked-checkbox  

　　　You dinamically create a checkbox and then put its state to checked. Then, you append your new checkbox to its parent. In firefox there’s nothing wrong with that. But Internet Explorer DOES NOT check the box. Why? Well, FIRST you have to show the checkbox and THEN check it.

 

So:　

chk = document.createElement('INPUT')
chk.type='checkbox'
chk.checked=true
document.getElementById('container').appendChild(chk)

 Does not work in IE. You have to rewrite this as:

chk = document.createElement('INPUT')
chk.type='checkbox'
document.getElementById('container').appendChild(chk)
chk.checked=true

 

　　从这里我们可以看出在IE中，checked属性需要在添加到页面以后设置才有效，而FF,Opera都不存在此现象。

 

　　2、firefox和ie下面的初始化checkbox
　　　http://www.cnblogs.com/sxlfybb/archive/2008/03/20/1114242.html

 

　　　这篇日志得出同样的结果。(申明：firefox下是支持cb.checked=true这样的写法，checked是一个可读写的属性。至少我的环境是正常的。)

 

　　3、使用CheckBox的indeterminate属性的问题

　　　http://blog.csdn.net/yangdengfeng2003/archive/2007/05/05/1597399.aspx  

 

　　　这篇日志提到了CheckBox的indeterminate属性的问题，注意：CheckBox的indeterminate是一个独立的 属性，和CheckBox的checked、status的取值无关，也就是说它只会影响CheckBox的外观显示，我们仍然可以正常的使用脚本读取 checked和status的值。

 

 　　4、DOM & checkbox(checked status)

　　　http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=842144&SiteID=1

 

        帖子中提到Checkbox在IE6和IE7下的多种情况。（此帖子中的代码本人没有测试过。）

 

　　　最后看看本人测试结果及结论：

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4   <title>CheckBox Example</title>
 5   <meta name="generator" content="editplus" />
 6   <meta name="author" content="Net205" />
 7   <meta name="keywords" content="Net205,冷风工作室" />
 8   <meta name="description" content="CheckBox Example in IE、FF、OP" />
 9   <meta http-equiv='Cache-Control' content='no-cache'/>
10  </head>
11 
12 <body>
13 <%
14     Response.Buffer = true
15     Response.Expires = 0
16     Response.ExpiresAbsolute = Now() - 1     
17     Response.CacheControl = "no-cache"  
18     Response.AddHeader "Pragma", "No-Cache" 
19 
20     For Each e In Request.Form
21         Response.Write e & " : " & Request.Form(e) & "<br />"
22     Next
23 
24 %>
25 <form id="frm" name="frm" method="post" action="?">
26     <input type="checkbox" id="chkTest1" name="chkTest1" value="1" />
27     <script>
28         /*you can use setAttribute to set the value of attribute,like this:
29           chk.setAttribute("name", "chkTest2")，chk.setAttribute("checked", true)*/
30         var chk1 = document.createElement('input');
31         chk1.id = "chkTest2";
32         chk1.name = "chkTest2";
33         chk1.type = "checkbox";
34         chk1.value = "1";
35         //chk1.defaultChecked=true;
36         //chk1.indeterminate = true;
37         document.getElementById('frm').appendChild(chk1);
38         chk1.checked=true;
39     </script>
40     <input type="submit" />
41 </form>
42 </body>
43 </html>
 

 

　　　结论：
　　　1、当用Javascript脚本创建并添加CheckBox复选框时，对于IE，必须在添加(如：appendChild)后设置checked值才有效，FF、OP都有效，无此现象。
　　　2、defaultChecked直接写到属性里，IE、FF、OP都不支持，当用Javascript脚本设置为true时，都支持(无顺序关系)，并在服务器端可以取到值。
　　　3、indeterminate当属性添加时IE、FF、OP都无效，只有当用Javascript脚本设置时，IE才有效，并在服务器端取不到值，只会影响CheckBox的外观显示。
　　　4、当用setAttribute设置checked值时，如果为unchecked状态，对于FF、OP则不需要设置任何值，就算设置为fasle、"false"或""(空字符串)，checkbox都为选中状态。

　　　5、类似document.createElement("<input type=checkbox>");创建元素时，只有IE才有效。


　　　说明：本人测试环境为IE6.0 sp2、Firefox 3.0.1、Opera 9.52，如有其他情况，请各位同仁指出。

分享到：
| 使用 Eclipse自动清理代码
评论
1 楼 zgw06629 2013-10-10  
哎呀，折腾了半天。看了你的帖子， 总算解决了。谢谢！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    火狐中 获取checkbox的checked属性的方法

    总结来说，火狐中获取和设置`checkbox`的`checked`属性时，应当避免使用jQuery的`.attr()`方法，而应直接通过DOM元素的`checked`属性进行操作，以确保代码的兼容性和稳定性。这尤其在处理大量复选框，比如全选/取消...

    浅析jquery与checkbox的checked属性的问题

    jQuery与checkbox的checked属性之间的关系是前端开发者经常需要处理的问题。在Web开发过程中，复选框（checkbox）是用来让用户选择多个选项的常用表单控件，而jQuery是一个广泛使用的JavaScript库，它简化了HTML文档...

    Jquery 获取checkbox的checked问题

    在讨论这个问题之前，我们先明确HTML中的`checked`属性和jQuery中获取该属性值的区别。 在HTML中，当一个复选框被选中时，其`&lt;input&gt;`标签通常会包含`checked="checked"`属性。例如： ```html &lt;input type="...

    android checkbox 的isChecked属性

    在XML布局文件中，可以使用`android:checked`属性来设置CheckBox的初始状态。例如： ```xml &lt;CheckBox android:id="@+id/my_checkbox" android:layout_width="wrap_content" android:layout_height="wrap_...

    用JS修改checkbox的选中状态

    这里的`type="checkbox"`定义了这是一个复选框，而`id`属性则为该元素提供了唯一标识，便于我们通过JavaScript进行访问。 在JavaScript中，我们可以使用`document.getElementById()`或`document.querySelector()`...

    IE中radio 或checkbox的checked属性初始状态下不能选中显示问题

    然而，不同浏览器之间对于HTML元素的解析和处理可能存在差异，其中IE浏览器就存在一个特定的问题，即在初始状态下无法通过`checked`属性正确设置`radio`或`checkbox`为选中状态。这个问题主要体现在`IE`的早期版本，...

    jquery attr方法获取input的checked属性问题

    问题：经常使用jQuery插件的attr方法获取checked属性值，获取的值的大小为未定义，此时可以用prop方法获取其真实值，下面介绍这两种方法的区别： 1.通过prop方法获取checked属性，获取的checked返回值为boolean，...

    PB 11.5 CheckBox三种状态的实例

    它有三种状态：未选中（No Check），已选中（Checked），和禁用（Disabled）。在PowerBuilder中，我们可以使用SetState方法来改变CheckBox的状态。 2. 设置CheckBox的状态： - 未选中状态：这是CheckBox的初始状态...

    含有checkbox的combox控件类

    `CheckComboBox.h`文件则定义了类的结构，包括公开的接口（public methods），私有数据成员（private members）以及可能的类属性（class properties）。在这个类中，我们可能会看到如何添加、删除和修改Checkbox状态...

    原生js操作checkbox用document.getElementById实现

    在讨论原生JavaScript（简称js）操作复选框（checkbox）时，常用的方法包括使用document.getElementById()函数来获取特定ID的DOM元素，并操作其checked属性来控制复选框的选中状态。这种方法相较于使用jQuery库中的...

    vs2008演示CheckBox复选框控件的使用实例

    - 设置属性：在属性窗口中修改`Text`、`Checked`等属性以定制CheckBox。 - 编写事件处理程序：在代码编辑器中添加`CheckedChanged`或`Click`事件处理程序，编写相应逻辑。 4. **示例代码**： ```csharp private...

    C#复选框重绘 Checkbox

    在实际项目中，你可以根据需求设置`CheckBoxSize`和`CheckedImage`属性，然后在界面上添加`CustomCheckBox`实例，实现个性化的设计。 通过以上步骤，我们成功地创建了一个支持选框大小调整和选框图像替换的自定义`...

    delphi Listview复选框checkbox实现单选的功能

    - 在`OnItemClick`事件处理程序中，首先遍历ListView的所有项，将它们的`Checked`属性设置为`False`，然后将被点击项的`Checked`属性设置为`True`。这样，每次点击一项时，只有当前项会被选中，其他项会自动取消...

    jquery操作checked属性以及disabled属性的多种方法

    ### Jquery操作checked属性以及disabled属性的多种方法 #### 知识点概述： 本文主要介绍如何使用jQuery来操作HTML元素中的`checked`属性和`disabled`属性。在HTML中，`checked`属性通常用在单选按钮（radio）和复...

    改变checkbox背景勾选样式

    .custom-checkbox input:checked + label::before { background-color: #0095f6; border-color: #0095f6; } ``` 4. **绘制勾选标记：** 对于勾选标记，我们可以再次利用`::before`或`::after`伪元素，使用`...

    C#中checkboxList控件用法总结

    C#中checkboxList控件用法总结 CheckboxList控件是C#中常用的控件之一，主要用于显示多选项列表。以下是关于CheckboxList控件的17种常用方法的总结。 一、添加项 CheckboxList控件可以使用Items.Add方法来添加新...

    struts的htmlcheckbox标签的默认选中问题

    综上所述，虽然Struts的htmlcheckbox标签本身并不提供直接的`checked`属性来控制默认选中状态，但通过巧妙地结合htmlhidden标签，可以实现这一需求。这种方法不仅解决了默认选中的问题，而且保持了代码的简洁性和可...

Magicbox
Global site tag (gtag.js) - Google Analytics