代码之家 › 专栏 › 技术社区 › CheeseFlavored

使用css或javascript设置输入类型

webpage forms css html javascript

0

CheeseFlavored · 技术社区 · 7 年前

我在页面上的一个名为“选项”的分区中有几个复选框。这样地

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

因为我知道这个分区中的每一个输入都是一个复选框,所以我想知道在CSS或JavaScript中是否有一种方法可以使它们自动成为复选框而不需要我输入。 type="checkbox" 每一次。

3 回复 | 直到 7 年前

1

Jack Bashford 7 年前

是的,您可以在javascript中这样做:

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

这将转换的节点列表 <input> 元素到数组中,然后将 type 属性。

这里还有一种jquery/es6方法:

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

2

brk 7 年前

在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>

3

1

Bibberty 7 年前

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>