Немного запутался в коде. То код не работает, то работает через раз и т.д.
Поэтому прошу тех кто знает написать ответ - пример - подсказку.
На странице есть блок, которому присвоен класс 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; }