使用 css 或 javascript 设置输入类型

Question

我的页面上有几个复选框 div 名为 OPTIONS。像这样

<div id="options">     
<input type="checkbox"..... > 
<input type="checkbox"..... >
<input type="checkbox"..... >
<input type="checkbox"..... >
<input type="checkbox"..... >
...
...
</div>

因为我知道这个 div 中的每个输入都将始终是一个复选框，所以我想知道 css 或 javascript 中是否有办法让它们在没有我的情况下自动成为复选框每次输入 type="checkbox"。

Answer 1

html 中的设置将是更好的选择。默认输入类型是 text 并且通过 javascript 更改类型将比直接在 html

中设置更慢

如果您仍然选择这样做，您可以定位元素，获取它的子元素，然后遍历它并使用 setAttribute

更改类型

document.getElementById('options').children会给出一个集合，使用展开运算符...这样就可以使用数组的方法

[...document.getElementById('options').children].forEach(item => {
  item.setAttribute('type', 'checkbox')

})

<div id="options">
  <input>
  <input>
  <input>
  <input>
  <input>

</div>

Answer 2

document.addEventListener('DOMContentLoaded', function() {

  let inputs = document.querySelectorAll('#options input');
  
  for(let input of inputs) {
    console.log(input);
    input.type = 'checkbox';
  }

});

<div id="options">     
<input> 
<input>
<input>
<input>
<input>
<input> 
<input>
<input>
<input>
<input><input> 
<input>
<input>
<input>
<input><input> 
<input>
<input>
<input>
<input><input> 
<input>
<input>
<input>
<input>
</div>

Answer 3

是的，您可以像这样在 JavaScript 中执行此操作：

var inputs = Array.from(document.getElementsByTagName("input"));
inputs.forEach(function(elem) {
    elem.setAttribute("type", "checkbox");
})

这会将 <input> 元素的 NodeList 转换为数组，然后设置 type 属性。

这里还有一个 jQuery/ES6 的方法：

$("input").each(elem => elem.attr("type", "checkbox"))

使用 css 或 javascript 设置输入类型

Setting the input type with css or javascript

html

javascript

css

forms

webpage