Как проверить все checkbox и если value = 1 , то сделать checked?

192

22 декабря 2018, 22:10

Есть условие, что у чекбоксов не заданы классы,нужно ссылаться только на тип и value

Нужен чистый js,сам я чайник в нем,да и не понимаю, как ссылаться на тип

Вот то, что сейчас есть, но увы работает только для 1-го чекбокса

var sd = document.querySelector('input[type=checkbox]');    
if (sd.value == 1) {
   sd.checked = true; 
}

Заранее спасибо большое за помощь)

Answer 1

document.querySelector возвращает один элемент, первый который подходит под условия селектора. Вам нужен document.querySelectorAll который вернет коллекцию, и можно перебрать циклом

<input type="checkbox" value="0"> 
<input type="checkbox" value="1"> 
<input type="checkbox" value="0"> 
<input type="checkbox" value="1"> 
<input type="checkbox" value="0"> 
<input type="checkbox" value="1"> 
 
<script> 
  var checkbox = document.querySelectorAll('input[type=checkbox]'); 
  var i = 0; 
 
  for (; i < checkbox.length; i++) { 
    var check = checkbox[i]; 
 
    if (check.value === '1') { 
        check.checked = true; 
    } 
  } 
</script>

Answer 2

Написал на скорую руку используя ES5 надеюсь никто ничего против не имеет.

function toggle(source) { 
  checkboxes = document.querySelectorAll('input[type=checkbox]');  
  for(var i=0, n=checkboxes.length;i<n;i++) { 
    checkboxes[i].checked = source.checked; 
  } 
}

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/> 
 
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/> 
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/> 
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/> 
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

Answer 3

Получаем список чекбоксов при помощи document.querySelectorAll('input[type=checkbox]');
У списка вызываем метод forEach и перебираем все элементы списка

function setCheck() { 
  const items = document.querySelectorAll('input[type=checkbox]'); 
  items.forEach(function(el) { 
    if (el.value == 1) { 
      el.checked = true; 
    } 
  }); 
}

<input type="checkbox" value="1" /> 
<input type="checkbox" value="0" /> 
<input type="checkbox" value="1" /> 
<button onclick="setCheck()">Check</button>

Answer 4

Можно просто через селектор [value="1"]

const items = document.querySelectorAll('input[type=checkbox][value="1"]') 
 
for (el of items) { 
  el.checked = true 
}

<input type="checkbox" value="1"> 
<input type="checkbox" value="0"> 
<input type="checkbox" value="1">

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

chosen.js multiple select как добавить класс выбранному тегу

для своего проэкта я использую плагин chosenjs(https://harvesthq

236

javascript

Галерея с превью

Сделал галерею с превью, Помогите как сделать в модальном окне так же что б переносились фото с превью и листались в модальном окне так же сохраняясь...

232

javascript