使用createElement()创建checkbox不能设置name属性

               今天在使用document.createElement()动态创建复选框时,发现不能为其name赋值,以下是测试代码:
  1. <html>
  2.   <head>
  3.     <title>Test</title>
  4.   </head>
  5.   <body>
  6.      <div id="testDiv"></div>
  7.      <input type="button" onclick="addInput()" value="Test0">
  8.      <input type="button" onclick="show()" value="Test1">
  9.      <script language="javascript">
  10.        function addInput(){
  11.         var div = document.getElementById("testDiv");
  12.          for(var ii = 0; ii < 5; ii++){
  13.            var check = document.createElement("input");
  14.            check.type = "checkbox";
  15.            check.id = "chk_" + ii;
  16.            check.name = "chkGroup";
  17.            div.appendChild(check);
  18.          }
  19.          alert(div.innerHTML);
  20.        }
  21.        
  22.        function show(){
  23.         alert(document.getElementsByName("chkGroup").length);
  24.        }
  25.     </script>
  26.   </body>
  27. </html>

       其中check.name = "chkGroup"这句话并不能起到预期的作用,无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度,都会发现这个name设置并没有起作用。当然这种情况只出现在IE6和IE7中,而在FireFox中是没有问题的。
      当然解决方法很简单,在创建时,使用document.createElement("<input name='chkGroup'>")。不过还不知道是什么原因?
      在Name属性的说明中有这样一句话:     

In Internet Explorer 5, the name property cannot be set at run time on anchor objects dynamically created with the createElement method. To create an anchor with a NAME attribute, include the attribute and value when using the createElement method, or use the innerHTML property.

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
你可以使用 `renderer` 属性来实现单选。 首先,你需要定义一个 `columns` 数组,其中包含你的所有列,包括 checkbox 列。在 checkbox 列中,你需要设置 `type` 属性为 `checkbox`,并为每个单元格设置一个 `checked` 属性,以便它们可以显示或隐藏复选框。 然后,你需要为 checkbox设置一个 `renderer` 函数,该函数将返回一个包含复选框的 DOM 元素。在该函数中,你可以使用 `addEventListener` 来为复选框设置单击事件监听器,以便在单选时更新其他单元格的状态。 以下是一个示例代码: ```javascript const columns = [ { data: 'name', title: 'Name' }, { data: 'age', title: 'Age' }, { data: 'selected', title: 'Selected', type: 'checkbox', checked: false, renderer: (instance, td, row, col, prop, value, cellProperties) => { const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.checked = value; checkbox.addEventListener('click', (event) => { instance.setDataAtRowProp(row, 'selected', !value); for (let i = 0; i < instance.countRows(); i++) { if (i !== row) { instance.setDataAtRowProp(i, 'selected', false); } } }); td.appendChild(checkbox); return td; }, }, ]; const hot = new Handsontable(document.getElementById('example'), { data: data, columns: columns, // ... }); ``` 在上面的示例代码中,我们为 checkbox 列定义了一个 `renderer` 函数,该函数将返回一个包含复选框的 DOM 元素。我们还添加了一个单击事件监听器,当用户单击复选框时,它将更新其他行的状态,以便只有一个行被选中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mydeman

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值