Установка типа ввода с помощью CSS или JavaScript - PullRequest
Новая
       16

Установка типа ввода с помощью CSS или JavaScript

0 голосов
/ 06 января 2019

У меня есть несколько флажков на моей странице в разделе под названием ОПЦИИ. как это 

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

Так как я знаю, что каждый вход в этом div всегда будет флажком, мне было интересно, есть ли способ в css или javascript сделать их автоматически флажками без моего ввода type="checkbox" каждый раз.

Ответы [ 3 ]

0 голосов
/ 06 января 2019 

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>
0 голосов
/ 06 января 2019

Да, вы можете просто сделать это в JavaScript следующим образом: 

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

Это преобразует NodeList элементов <input> в массив, который затем устанавливает атрибут type.

Вот способ jQuery / ES6 сделать это тоже: 

$("input").each(elem => elem.attr("type", "checkbox"))
0 голосов
/ 06 января 2019

Установка в 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>
...