问题
I made this perms config:
I would like to mark all checkboxes in the row when "Manage" is selected. Each row has a class like "perms_rowname" (users, library, textbooks, teacherbooks)
Switchers code:
function markCheckedPerms(module) {
$("#users_view").prop('checked', true);
$("#users_edit").prop('checked', true);
$("#users_delete").prop('checked', true);
}<script src="https://library.entornocbs.eu/assets/plugins/global/plugins.bundle.js" type="text/javascript"></script>
<link href="https://library.entornocbs.eu/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css">
<link href="https://library.entornocbs.eu/assets/css/style.bundle.css" rel="stylesheet" type="text/css">
<script src="https://library.entornocbs.eu/assets/js/scripts.bundle.js" type="text/javascript"></script>
<script>
var KTAppOptions = {
"colors": {
"state": {
"brand": "#1dc9b7",
"light": "#ffffff",
"dark": "#282a3c",
"primary": "#5867dd",
"success": "#1dc9b7",
"info": "#36a3f7",
"warning": "#ffb822",
"danger": "#fd3995"
},
"base": {
"label": ["#c5cbe3", "#a1a8c3", "#3d4465", "#3e4466"],
"shape": ["#f0f3ff", "#d9dffa", "#afb4d4", "#646c9a"]
}
}
};
</script>
<label class="col-lg-2 col-form-label">Users:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" value="" id="users_view" name="users_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_edit" name="users_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_delete" name="users_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_manage" name="users_manage" onClick="markCheckedPerms('users')">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Library:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_view" id="" name="library_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_edit" name="library_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_delete" name="library_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_lend" name="library_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_manage" name="library_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Text Books:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_view" name="textbook_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_edit" name="textbook_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_delete" name="textbook_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_lend" name="textbook_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_manage" name="textbook_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Teacher Books:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_view" name="teacherbook_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_edit" name="teacherbook_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_delete" name="teacherbook_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_lend" name="teacherbook_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_manage" name="teacherbook_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>I created a function to mark all checkboxes in the row when manage is clicked:
But I just don't know how to mark as checked all checkboxes of the same module...
How can I do it?
回答1:
You are overthinking your need.
I removed your inline call to the even onclick, instead I have added a jquery listener for the javascript change event. This event get trigger each time one of the targeted element change states.
It's the case of a checkbox for example. Its state changes each time I click on it.
I also added a class manage_check to all your 'manage' input. This is the class I put the change listener on.
Then I find the container of his category (by using the class you made "form-group")
When I reach it, I select all his input[type="checkbox"] that are not my 'manage' checkbox (by using the css pseudo-class selector not)
and finaly I trigger a click event them
$('.manage_check').on('change',function(){
$(this).parents('.form-group').find('input[type="checkbox"]:not(".manage_check")').click();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-lg-2 col-form-label">Users:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" value="" id="users_view" name="users_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_edit" name="users_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_delete" name="users_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users manage_check" type="checkbox" id="users_manage" name="users_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Library:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_view" id="" name="library_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_edit" name="library_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_delete" name="library_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_lend" name="library_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library manage_check" type="checkbox" id="library_manage" name="library_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Text Books:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_view" name="textbook_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_edit" name="textbook_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_delete" name="textbook_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_lend" name="textbook_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks manage_check" type="checkbox" id="textbook_manage" name="textbook_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Teacher Books:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_view" name="teacherbook_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_edit" name="teacherbook_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_delete" name="teacherbook_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks" type="checkbox" id="teacherbook_lend" name="teacherbook_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_teacherbooks manage_check" type="checkbox" id="teacherbook_manage" name="teacherbook_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>回答2:
You should put an id in each row:
<label class="col-lg-2 col-form-label">Users:</label>
<div data-repeater-list="" class="col-lg-10" id="users_row">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" value="" id="users_view" name="users_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_edit" name="users_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_delete" name="users_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_manage" name="users_manage" onClick="markCheckedPerms('users')">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
This way you can get all the children of the row and then edit them in a single swoop:
$("#users_row").find("input").prop("checked", true);
回答3:
Please check the bellow code
$('#users_manage').change(function(){
//get the property of the manage input
var thisProp = $(this).prop('checked');
//aaply this property to al the inputs in the row except the manage input itself
$(this).parents('.row').find('input').not(this).prop('checked',thisProp);
});
If you put a specific class on each manage button you could also refer using this code for all the rows by passing as selector the class and not the id that I've put. otherwise you will have to use the above code for each row
回答4:
If you can't edit your HTML then you could use this answer.
Find the closest parent to the checkbox and mark the current state of it to the remaining input boxes in the same row.
function switchAll(a) {
var $this = $(a);
$this.closest(".form-group").find(".col-md-2:not(:last-child) input").prop("checked", $this.prop("checked"));
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-lg-2 col-form-label">Users:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" value="" id="users_view" name="users_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_edit" name="users_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_users" type="checkbox" id="users_delete" name="users_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input onchange="switchAll(this)" class="perms_users" type="checkbox" id="users_manage" name="users_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Library:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_view" id="" name="library_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_edit" name="library_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_delete" name="library_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_library" type="checkbox" id="library_lend" name="library_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input onchange="switchAll(this)" class="perms_library" type="checkbox" id="library_manage" name="library_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Text Books:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_view" name="textbook_view">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Edit:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_edit" name="textbook_edit">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Delete:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_delete" name="textbook_delete">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Lend:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input class="perms_textbooks" type="checkbox" id="textbook_lend" name="textbook_lend">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>Manage:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">
<label>
<input onchange="switchAll(this)" class="perms_textbooks" type="checkbox" id="textbook_manage" name="textbook_manage">
<span></span>
</label>
</span>
</div>
</div>
<div class="d-md-none kt-margin-b-10"></div>
</div>
</div>
</div>
<label class="col-lg-2 col-form-label">Teacher Books:</label>
<div data-repeater-list="" class="col-lg-10">
<div data-repeater-item="" class="form-group row align-items-center">
<div class="col-md-2">
<div class="kt-form__group--inline">
<div class="kt-form__label">
<label>View:</label>
</div>
<div class="kt-form__control">
<span class="kt-switch kt-switch--outline kt-switch--icon kt-switch--success">回答5:
simply add class to your checkboxes
<input type="checkbox" class="chkbx">
<script>
$(".chkbx").prop('checked', true);
$(".chkbx").attr('checked', 'checked');
</script>
you can keep your ids and classes as is, class="class1 class2" is supported,, just append chkbx class to your checkboxes
Now above if you want all checkboxes to be chekd t once, for Particular Module checkboxes you can give classes at the build time like
<input type="checkbox" class="chk_Users"/>
on Manage you can give
<input type="checkbox" class="chkManage" data-cls="Users"/>
<script>
$(".chkManage").change(function(){
var tk = $(this).attr("data-cls");
$(".chk_"+tk).prop('checked', true);
$(".chk_"+tk).attr('checked', 'checked');
});
</script>
Above code will mark every checkboxes as true irrespective of what Manage checkbox state is. you can use $(this).prop('checked') instead of true
来源：https://stackoverflow.com/questions/64264461/mark-others-checkboxes-onclick