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:
<!---->1 chk = document.createElement('INPUT')
2 chk.type='checkbox'
3 chk.checked=true
4 document.getElementById('container').appendChild(chk)
Does not work in IE. You have to rewrite this as:
<!---->1 chk = document.createElement('INPUT')
2 chk.type='checkbox'
3 document.getElementById('container').appendChild(chk)
4 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下的多种情况。(此帖子中的代码本人没有测试过。)
最后看看本人测试结果及结论:
Code
<!----> 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,如有其他情况,请各位同仁指出。
分享到:
相关推荐
总结来说,火狐中获取和设置`checkbox`的`checked`属性时,应当避免使用jQuery的`.attr()`方法,而应直接通过DOM元素的`checked`属性进行操作,以确保代码的兼容性和稳定性。这尤其在处理大量复选框,比如全选/取消...
jQuery与checkbox的checked属性之间的关系是前端开发者经常需要处理的问题。在Web开发过程中,复选框(checkbox)是用来让用户选择多个选项的常用表单控件,而jQuery是一个广泛使用的JavaScript库,它简化了HTML文档...
在讨论这个问题之前,我们先明确HTML中的`checked`属性和jQuery中获取该属性值的区别。 在HTML中,当一个复选框被选中时,其`<input>`标签通常会包含`checked="checked"`属性。例如: ```html <input type="...
在XML布局文件中,可以使用`android:checked`属性来设置CheckBox的初始状态。例如: ```xml <CheckBox android:id="@+id/my_checkbox" android:layout_width="wrap_content" android:layout_height="wrap_...
这里的`type="checkbox"`定义了这是一个复选框,而`id`属性则为该元素提供了唯一标识,便于我们通过JavaScript进行访问。 在JavaScript中,我们可以使用`document.getElementById()`或`document.querySelector()`...
然而,不同浏览器之间对于HTML元素的解析和处理可能存在差异,其中IE浏览器就存在一个特定的问题,即在初始状态下无法通过`checked`属性正确设置`radio`或`checkbox`为选中状态。这个问题主要体现在`IE`的早期版本,...
问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取的checked返回值为boolean,...
`.prop()`方法用于设置或返回元素的属性值,如`checked`属性表示复选框是否被选中。以下是如何选中和取消选中的示例: ```javascript // 选中复选框 $("#checkbox1").prop("checked", true); // 取消选中复选框 $...
`CheckComboBox.h`文件则定义了类的结构,包括公开的接口(public methods),私有数据成员(private members)以及可能的类属性(class properties)。在这个类中,我们可能会看到如何添加、删除和修改Checkbox状态...
在讨论原生JavaScript(简称js)操作复选框(checkbox)时,常用的方法包括使用document.getElementById()函数来获取特定ID的DOM元素,并操作其checked属性来控制复选框的选中状态。这种方法相较于使用jQuery库中的...
- 设置属性:在属性窗口中修改`Text`、`Checked`等属性以定制CheckBox。 - 编写事件处理程序:在代码编辑器中添加`CheckedChanged`或`Click`事件处理程序,编写相应逻辑。 4. **示例代码**: ```csharp private...
- 在`OnItemClick`事件处理程序中,首先遍历ListView的所有项,将它们的`Checked`属性设置为`False`,然后将被点击项的`Checked`属性设置为`True`。这样,每次点击一项时,只有当前项会被选中,其他项会自动取消...
在实际项目中,你可以根据需求设置`CheckBoxSize`和`CheckedImage`属性,然后在界面上添加`CustomCheckBox`实例,实现个性化的设计。 通过以上步骤,我们成功地创建了一个支持选框大小调整和选框图像替换的自定义`...
### Jquery操作checked属性以及disabled属性的多种方法 #### 知识点概述: 本文主要介绍如何使用jQuery来操作HTML元素中的`checked`属性和`disabled`属性。在HTML中,`checked`属性通常用在单选按钮(radio)和复...
.custom-checkbox input:checked + label::before { background-color: #0095f6; border-color: #0095f6; } ``` 4. **绘制勾选标记:** 对于勾选标记,我们可以再次利用`::before`或`::after`伪元素,使用`...
C#中checkboxList控件用法总结 CheckboxList控件是C#中常用的控件之一,主要用于显示多选项列表。以下是关于CheckboxList控件的17种常用方法的总结。 一、添加项 CheckboxList控件可以使用Items.Add方法来添加新...
综上所述,虽然Struts的htmlcheckbox标签本身并不提供直接的`checked`属性来控制默认选中状态,但通过巧妙地结合htmlhidden标签,可以实现这一需求。这种方法不仅解决了默认选中的问题,而且保持了代码的简洁性和可...