JSFiddle - React, Tailwind, and code Playground

by Nik Shevchenko

HTML

<form method="get">
  <div class="test">
    <label class="list">
      <input class="check_list" type="checkbox">
      <span class="list__main">Заголовок</span>
    </label>
    <label class="item">
      <input class="input__item" type="checkbox" data-url="analog">
      <span class="text">Вариант 1</span>
    </label>
    <label class="item">
      <input class="input__item" type="checkbox" data-url="cifra">
      <span class="text">Вариант 2</span>
    </label>
    <label class="item">
      <input class="input__item" type="checkbox" data-url="analog">
      <span class="text">Вариант 3</span>
    </label>
  </div>
  <a class="button">Применить</a>
</form>

CSS

form {
  display: block;
}

.list__main {
  margin-bottom: 20px;
}

.button {
  display: block;
  width: 100px;
  height: 30px;
  color: #fff;
  line-height: 30px;
  text-align: center;
  margin-top: 50px;
  cursor: pointer;
  background-color: green;
}

JavaScript

$('.button').on('click', function() {
		if ($('.input__item').prop("checked")) {
  	$('.check_list').prop("checked", true);
  } else {
  	$('.check_list').prop("checked", false);
  };
});