1

Здравствуйте. Такой вопрос - есть форма с кучей чекбоксов, типа такой

<form>
<input type checkbox" class="class1 class2" />
<input type checkbox" class="class2" />
<input type checkbox" class="class1" /> 
<input type checkbox" class="class1 class2" />
<input type checkbox" class="class1" /> 

И есть две кнопки

<button>1111</button> <button>2222</button>

По нажатию на первую кнопку должны выбираться все чекбоксы с классом class1 (т. е. в примере - 1,3,4 и 5), а при нажатии на вторую - с классом class2 (т.е. в примере - 1,2 и 4), причем, нажатие одной кнопки убирает отметки, установленные другой кнопкой.

Подскажите, пожалуйста, как сделать?

1
  • Чистый javascript или jquery?
    – Nick
    19 фев 2018 в 19:56

2 ответа 2

4

document.addEventListener('click',function(e){
  if (e.target.hasAttribute('data-class')) {
    var button = e.target;
    var className = button.getAttribute('data-class');
    var checkboxes = document.querySelectorAll('input');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = checkboxes[i].classList.contains(className) ? true : false;
    }
  }
});
<form>
  <input type="checkbox" class="class1 class2" />
  <input type="checkbox" class="class2" />
  <input type="checkbox" class="class1" /> 
  <input type="checkbox" class="class1 class2" />
  <input type="checkbox" class="class1" /> 
  <button type='button' data-class='class1'>Class 1</button>
  <button type='button' data-class='class2'>Class 2</button>
</form>

2
  • огромное спасибо, вариант подошел. А не подскажете ли еще? Допустим, вместо некоторых чекбоксов у меня будут обычные числовые инпуты. Можно ли их значения увеличивать на определённое число по тому же принципу?
    – investekkz
    20 фев 2018 в 5:57
  • конечно. получаем value инпута, в дата атрибуты кнопок можно записать например plus и minus, и делать проверку, если равен plus то прибавляем, иначе отнимаем, и записываем в value новое значение.
    – empy26
    20 фев 2018 в 21:00
0

Можно с помощью jQuery.

function checkElements(classname) {
  $("input[type='checkbox']").each(function() {
    if ($(this).hasClass(classname)) {
      $(this).prop("checked", true);
    } else {
      $(this).prop("checked", false);
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="class1 class2" />
<input type="checkbox" class="class2" />
<input type="checkbox" class="class1" />
<input type="checkbox" class="class1 class2" />
<input type="checkbox" class="class1" />
<button onclick="checkElements('class1')">111</button>
<button onclick="checkElements('class2')">222</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.