Как отчистить все чекбоксы?

Немного запутался в коде. То код не работает, то работает через раз и т.д.
Поэтому прошу тех кто знает написать ответ - пример - подсказку.

На странице есть блок, которому присвоен класс scrollable_div.
В этот блок, методом $.ajax загружаются чекбоксы.
Нужно по нажатию на ссылку снять выделение (checked, отключить) все чекбоксы в блоке scrollable_div.

Обратите внимание, загрузка с помощью $.ajax и стилизация чекбоксов (::before).
Т.е. надо не только снять галочку с реального чекбокса, но и как то снять с кастомизированного.

Как отчистить все чекбоксы?

https://jsfiddle.net/js_user_/xpvt214o/663447/

<div class="page_content">
<a class="clear_all_checkboxes data_ui_2-link_1_dashed">Отчистить</a>
<br><br>

<!-- В этот блок загружаются чекбоксы -->
<div class="scrollable_div">
<!--Это загружается $ajax -->

<label>
<input class="datacurrency_checkbox data_ui_2-real_checkbox_1" type="checkbox" name="checkbox-test">
<div class="datacurrency_not_real_checkbox data_ui_2-checkbox_1"></div>
<div class="data_ui_2-checkbox_1_label_1">Текст для чекбокса 1</div>
</label>

<label>
<input class="datacurrency_checkbox data_ui_2-real_checkbox_1" type="checkbox" name="checkbox-test">
<div class="datacurrency_not_real_checkbox data_ui_2-checkbox_1"></div>
<div class="data_ui_2-checkbox_1_label_1">Текст для чекбокса 1</div>
</label>

</div>
</div>


$(document).ready(function() 
{
//Нажатие на ссылку отчистить
$('.page_content').on('click', '.clear_all_checkboxes', function(){

alert('А вот тут бы снять все галочки с чекбоксов!');

//Не работает (
$('.page_content .scrollable_div input:checkbox').removeAttr('checked');
});
});


body {
  background: #000000;
  
}
.data_ui_2-link_1_dashed {
  color: #1b8ee3;

  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid #1b8ee3; }
  
.data_ui_2-real_checkbox_1 {
  display: none; }

.data_ui_2-real_checkbox_1:checked + .data_ui_2-checkbox_1::before {
  content: '';
  background: #1b8ee3;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  -webkit-clip-path: polygon(40% 57%, 79% 11%, 92% 23%, 41% 83%, 6% 50%, 17% 36%);
  clip-path: polygon(40% 57%, 79% 11%, 92% 23%, 41% 83%, 6% 50%, 17% 36%);
  -ms-transform: scale(0.6, 0.6);
  transform: scale(0.6, 0.6);
  -webkit-transform: scale(0.6, 0.6); }

.data_ui_2-checkbox_1 {
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1rem;
  border: 1px solid #353343;
  background: #14111d; }

.data_ui_2-checkbox_1 {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer; }

.data_ui_2-checkbox_1_label_1 {
  display: inline-block;
  cursor: pointer;
  font-size: 0.875rem;
  color: #ffffff; }
  • Вопрос задан
  • 289 просмотров
Решения вопроса 1
@YAZART
$('input:checkbox').prop('checked', false);
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы