有这样一个标记：
<div class="field--name-field-finishing">
<a href="" class="dummy-select-deselect-finishing-options">Select/Deselect All</a>
<div class="field--name-field-finishing-option">
<div class="form-checkboxes">
<div class="js-form-type-checkbox">
<input type="checkbox" id="option-29202" name="field_finishing[29202]" value="29202" checked="checked" class="form-checkbox">
<label for="option-29202" class="option"><span class="views-field-field-image">
<span class="field-content">
<img loading="lazy" src="/path" typeof="Image">
</span>
</span>
<span class="views-field-name"><span class="field-content">Hem Tags</span></span>
</label>
</div>
<div class="js-form-type-checkbox">
<input type="checkbox" id="option-29203" name="field_finishing[29203]" value="29203" checked="checked" class="form-checkbox">
<label for="option-29203" class="option"><span class="views-field-field-image">
<span class="field-content">
<img loading="lazy" src="/path" typeof="Image">
</span></span>
<span class="views-field-name">
<span class="field-content">Hang Tags</span>
</span>
</label>
</div>
<div class="js-form-type-checkbox">
<input type="checkbox" id="option-29204" name="field_finishing[29204]" value="29204" checked="checked" class="form-checkbox">
<label for="option-29204" class="option"><span class="views-field-field-image">
<span class="field-content">
<img loading="lazy" src="/path" typeof="Image">
</span>
</span><span class="views-field-name">
<span class="field-content">Folding and Bagging</span>
</span>
</label>
</div>
</div>
</div>
</div>字符串
我需要用dummy-select-deselect-finishing-options类单击<a>，以便选中field--name-field-finishing-option中的所有复选框，当您再次单击时，相反，它们未选中。
如何实施？
我尝试了这样的方法，但它不起作用：
$(document).ready(function() {
$(".dummy-select-deselect-finishing-options").click(function() {
var checkboxes = $(".field--name-field-finishing-option input[type='checkbox']");
var isChecked = checkboxes.first().prop("checked");
checkboxes.prop("checked", !isChecked);
});
});型
css：
.field--name-field-finishing-option span.fieldset-legend {
font-size: rem(30px);
font-weight: bold;
}
.field--name-field-finishing-option .form-checkboxes {
display: flex;
flex-wrap: wrap;
margin: rem(-10px);
}
.field--name-field-finishing-option .form-checkboxes .form-item {
display: flex;
flex-direction: row;
width: 50%;
position: relative;
padding: rem(10px);
}
.field--name-field-finishing-option .form-checkboxes .form-item input {
border-radius: 50%;
padding: unset;
box-shadow: unset;
border: 1px solid getColor(neutral, 5);
width: rem(25px);
height: rem(25px);
position: absolute;
top: rem(26px);
right: rem(26px);
}
.field--name-field-finishing-option .form-checkboxes .form-item label {
order: -1;
display: flex;
align-items: center;
box-shadow: 0 rem(1px) rem(4px) rem(3px) #000;
border-radius: rem(30px);
width: 100%;
}
.field--name-field-finishing-option .form-checkboxes .form-item label .views-field-name {
padding-left: rem(17px);
font-size: rem(18px);
}
.field--name-field-finishing-option .form-checkboxes .form-item label img {
border-radius: rem(30px) 0 0 rem(30px);
}
.field--name-field-finishing-option .form-checkboxes .form-item input:checked + label {
background: getColor(blue, 2);
border: 1px solid getColor(blue, 5);
}型
2条答案
按热度按时间s4n0splo1#
将复选框收集到一个数组中，确定它们是否都被选中并反转值：
个字符
j7dteeu82#
代码中唯一缺少的是
e.preventDefault();。你的链接是一个链接，点击它将导航，你需要防止这种情况。字符串
的数据