ie中js创建checkbox默认选中问题 .

最新推荐文章于 2022-12-15 10:10:57 发布
转载 最新推荐文章于 2022-12-15 10:10:57 发布 · 326 阅读 · 0
文章标签：

#JS

本文探讨了在IE8不兼容模式下，使用JavaScript创建输入元素并设置其为复选框时遇到的问题。特别关注了在appendChild之后设置checked属性能够生效的情况，并解释了这种现象的原因。

测试浏览器：ie8(兼容和不兼容模式)，ff6。

var chk = document.createElement("input");

chk.setAttribute("type","checkbox");

container.appendChild(chk);

chk.setAttribute("checked",true);

以上代码在ie8兼容模式和ff6下都没有总是，但在ie8不兼容模式下不起作用，只有在appendChild后，再设置checked的值就都起作用，如下：

var chk = document.createElement("input");

chk.setAttribute("type","checkbox");

chk.setAttribute("checked",true);

container.appendChild(chk);

ie中js创建checkbox默认选中问题探讨
10-26
js创建checkbox默认选中在某些特殊情况下还是比较实用的，下面有个不错的示例，大家可以参考下
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
09-05
checked属性在IE下不能正确实现的问题
ie中js创建checkbox默认选中问题
ruilinruirui
08-31 161
测试浏览器：ie8(兼容和不兼容模式)，ff6。 var chk = document.createElement("input"); chk.setAttribute("type","checkbox"); container.appendChild(chk); chk.setAttribute("checked",true); 以上代码在ie8兼容模式和ff6下都没有总是，但在ie8...
IE6 IE7 下 checkbox 选中 问题
云计算专栏
05-26 2402
<div id="node1">level 1</div>     <script>     function a()   {       var node1=$("node1");// 第一层         var node2 = createElement("div");// 第二层-父亲node1       node2.innerHTML="<span>level 2</span>";         var node3 = createElement("div");// 第二层-父亲node1
document.createElement("input")动态创建html元素时checkbox和radio默认选中的问题
zb0567的专栏
08-10 1739
最近研究createElement的时候发现一个奇怪的问题 [JScript] view plaincopy var echkbox=document.createElement("input");   echkbox.setAttribute("type","checkbox");   echkbox.setAttribute("id","in
IE中checkbox在刷新后初始化的问题
09-05
例如，以下代码会创建一个默认未选中的`checkbox`： ```html <input type="checkbox" id="chk_UnInital" name="chk_UnInital" /> document.getElementById("chk_UnInital").checked = false; ``` 然而，这个方法...
比较全的JS checkbox全选、取消全选、删除功能代码
10-30
根据提供的文件信息，我们将讨论关于JavaScript（JS）中操作复选框（checkbox）的全选、取消全选和删除功能的实现。以下是详细的解释： ### 知识点一：全选与取消全选操作 在HTML中，复选框通常用于允许用户从一组...
jq设置checkbox默认选中状态
食火的埃尔德里奇
12-14 3万+
1.后台发送的数据 是spring框架中的对象model.addObject(“student”,stu); 前台页面由隐藏的接收对象页面代码：<input id="wfsi" class="hidden" th:value="${student.age}"/><div> <input id="ckbx" type="checkbox"/> </div>jq代码设置checkbox的几种方式:1.
ps中的色彩范围
ducaijia_123的博客
10-21 851
ps中的色彩平衡在选择->色彩范围中，他的作用可以把相近的颜色进行选区的选中，你可以按住shift键来进行颜色的增加和减少。还有他的一个容差值来进行选区的选择。
原生checkbox多选框默认选中以及获取选中的结果
文龙刚的博客
12-15 1471
原生checkbox多选框默认选中以及获取选中的结果
html怎么自动选中,Html checkbox标签如何设置默认选中以及用js操作checkbox代码示例...
weixin_39626089的博客
06-02 1032
在 HTML 文档中 每出现一次，Checkbox 对象就会被创建。Checkbox 设置默认选中代码:注意：checked="checked"表示默认选中状态。完整测javascript操作checkbox代码示例:function add(){var price = Number(document.getElementById("price1").value);var boxes = doc...
JS/jq 实现复选框默认选中
FF_Chen的博客
07-26 4142
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui/css/layui.css" /> </head> <body
angualrJS之checkbox默认选中项实例
miniminixu的博客
07-31 1万+
一、问题 工作时碰到一个问题，一条记录的详情是一个表单，表单中包含checkbox和radio等元素，这个表单有默认值且可以修改，接口已返回默认值，需要将默认值绑定到表单。平时没有接触过给checkbox和radio绑定值，也不太熟悉angularJS，只能求助于百度。二、解决过程 在百度搜到一片很好的文章将问题讲的浅显易懂，但由于没有收藏，翻遍历史记录也找不到那篇文章了，好在代码在调试时保存了
js控制checkbox选中
热门推荐
xiaoxiaoxiaoeryh的博客
05-04 5万+
$("#isOverInvoice").prop("checked", true);
javaScript checkbox 默认选中和不选中
09-01 8014
/** * checkbox默认选中 * @param {Object} name */ function checkbox_checked(name){ document.getElementsByTagName(name).checked = true; }
JS设置checkbox 为选中和未选中状态
iBenxiaohai123的博客
08-31 2万+
$("#checkAll").prop("checked",false);//重新请求数据的时候把全选框变为未选中 if ($("#checkbox-id")get(0).checked) {     // do something } 方法二： if($('#checkbox-id').is(':checked')) {     // do something } 方法三： i
js中复选框checkbox如何判定为被选中
爱学习的大雄的博客
07-07 3万+
在学习的过程中触及到html分离式开发的内容，其中复选框checkbox判定选中对于ajax传数据来说十分重要，故将该篇文章转发留存，方便以后查阅。要想判定复选框选中状态可以使用： 1、checkbox中的checked属性 1.1 如果对于input标签，不设置其checked属性的话，默认是该复选框不被选中； 1.2 而如果设置了checked属性的话，本人在js中测试的时候；1）将checked属性设置为checked=true或者checked=”true”或者checked=”false”时，系统
checkbox单击事件,默认勾选
程序员思维的博客
08-17 4036
<label><input id="IsProp" type="checkbox">需要试用</label> <script> $(function(){ //设置默认勾选 $("#IsProp").attr("checked", "checked"); //绑定单击事件 $("#IsProp").on("click", function () { if ($(this).prop("checked")) {
点击文字 checkbox选中
最新发布
03-19
<think>好的，用户现在问的是关于“点击文字 checkbox选中”的问题。首先，我需要明确用户的具体需求是什么。可能他们是在网页开发中遇到了如何实现点击文字就能选中对应的复选框的情况。这通常涉及到HTML和CSS的知识，特别是标签元素和复选框的关联。 首先，我应该回忆一下HTML中复选框的基本结构。通常复选框是用<input type="checkbox">来创建的，但要让文字可点击，就需要将<label>元素与复选框关联起来。这时候，正确使用<label>的for属性，或者将复选框包裹在<label>标签内是关键。 接下来，我需要考虑用户可能的实现方法。有两种常见的方式：一种是使用for属性，将<label>的for值与复选框的id匹配；另一种是将复选框直接放在<label>标签内部，这样就不需要for属性了。这两种方法都能实现点击文字选中复选框的效果。 然后，考虑到用户可能需要示例代码，我需要准备一个简单的代码示例，展示这两种方法。同时，应该提醒用户注意HTML结构的正确性，比如确保id的唯一性，或者正确嵌套标签以避免错误。 另外，用户可能对为什么需要这样做有疑问，可能需要解释一下标签元素的作用，以及为什么直接点击复选框本身可能不够友好，尤其是在移动端或可访问性方面。这时候可以提到提升用户体验和可访问性的好处。 还有可能需要提到一些常见的错误，比如忘记关联for和id，或者错误地嵌套元素导致点击无效。这部分内容可以帮助用户避免常见陷阱，确保他们的代码能够正确运行。 最后，总结一下步骤，确保用户能够清晰地按照指导进行操作。可能还需要补充一点关于样式定制的提示，比如如何通过CSS美化复选框和标签，但用户的问题主要是功能实现，所以这部分可以作为额外的建议。 在组织回答的时候，要保持结构清晰，分步骤说明，使用代码示例和注意事项来增强可读性和实用性。同时，使用中文口语化的表达，避免过于技术化的术语，让不同水平的开发者都能理解。</think>要实现在网页中"点击文字即可选中复选框"的效果，可以按照以下步骤操作： 一、实现原理 通过将 `<label>` 标签与 `<input type="checkbox">` 关联，利用 HTML 标签的天然特性： 1. 当点击 `<label>` 时，浏览器会自动触发关联的复选框状态变更 2. 不需要编写 JavaScript 代码，纯 HTML 即可实现 二、两种实现方式 1. 包裹式写法（推荐） ```html <label> <input type="checkbox"> 点击这段文字即可选中 </label> ``` 2. 分离式写法（需要匹配 id） ```html <input type="checkbox" id="myCheckbox"> <label for="myCheckbox">点击这段文字即可选中</label> ``` 三、注意事项 1. 使用分离式写法时： - `for` 属性值必须与复选框的 `id` 完全匹配 - 同一页面上不能有重复的 `id` 2. 兼容性说明： - 所有现代浏览器均支持 - IE8+ 支持此特性 四、样式优化建议（CSS） ```css /* 隐藏默认复选框 */ input[type="checkbox"] { position: absolute; opacity: 0; } /* 自定义复选框样式 */ label::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 2px solid #ccc; margin-right: 8px; vertical-align: middle; } input[type="checkbox"]:checked + label::before { background: #2196F3; border-color: #2196F3; } ``` 五、应用场景 1. 表单中的多选列表项 2. 任务清单（Todo List） 3. 需要提高可点击区域的交互设计 4. 增强移动端触摸体验 通过这种方式，不仅可以提升用户体验，还能增强网页的可访问性（Accessibility），使屏幕阅读器能正确识别标签与复选框的关联关系。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值