Как выбрать группу флажков с jQuery?

Question

MY HTML:

Основной флажок

<label class="new-control new-checkbox m-0 checkbox-success" >
    <input type="checkbox" class="new-control-input" onclick="select_section('admin_section')">
</label>

Есть много таких

<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>

Jquery для проверки указанной выше группы, но это не работает!

function select_section(value){
    var checkboxe = $('input[class="'+ value +'"]:checkbox');

    if(!checkboxe.prop("checked")) {
        checkboxe.attr('checked', 'checked');
    } else {
        checkboxe.removeAttr('checked');
    }
}

Answer 1

Вы можете использовать атрибуты data для хранения целевого класса, затем вы можете использовать checked статус основного флажка, чтобы установить целевые, например:

$('.new-control-input').on('change', function() {
    let cls = '.' + $(this).data('value');
    $(cls).prop('checked', this.checked);
});

DEMO

$('.new-control-input').on('change', function() {
    let cls = '.' + $(this).data('value');
    $(cls).prop('checked', this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="new-control new-checkbox m-0 checkbox-success" >
    <input type="checkbox" class="new-control-input" data-value="admin_section">
</label>
<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>
<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>
<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>
<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>

Answer 2

Во-первых, избавьтесь от встроенного обработчика событий. Затем следующее будет проверять / снимать флажки .admin_section, когда .new-control-input отмечен / снимается:

$('.new-control-input').click(function(){
  $('.admin_section').prop('checked', $(this).prop('checked'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="new-control new-checkbox m-0 checkbox-success" >
    <input type="checkbox" class="new-control-input">
</label>

<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>
<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>
<div class="pt-2 pb-2">
    <label class="new-control new-checkbox checkbox-success" >
        <input type="checkbox" name="permissions[]" class="admin_section">
        <span class="new-control-indicator"></span>
    </label>
</div>