Topic: How to change behavior of MDB's 'Select All' checkbox?
Expected behavior
I am trying to modify the behavior of the 'Select All' checkbox, which is dynamically generated by MDB. I want that when a user clicks on the 'Select All' checkbox, all the checkboxes in the list should be selected, AND a custom 'Save' button should be clicked automatically after this. I have tried using the jquery .on method for achieving this. I have used both 'change' and 'click' event listeners, and neither of them detects a change in the checked property or a click on the element. It seems as if the 'Select All' checkbox element cannot be selected at all if the code is placed within the HTML file. The selector code works fine in the chrome console, however.
Actual behavior
The functionality remains the default. All checkboxes are selected, but no additional functionality is added.
Resources (screenshots, code snippets etc.)
The code I tried to run:
$(document).ready(function() {
$('#select-tag-id').on('change', '.select-toggle-all input[type=checkbox]', function() {
console.log("RAN!");
if(this.checked) {
$('#btn-id').click();
}
})
})
Hi,
You can achieve this functionality by listening to the 'Select all' checkbox's label click and examining for is(':checked') on its input element. Here is the code based on the multiple select example of the documentation:
$(document).ready(function() {
$('.mdb-select').materialSelect();
$('.select-toggle-all label').on('click', function(){
setTimeout(function(){
if($('.select-toggle-all input[type=checkbox]').is(':checked')) {
$('.btn-save').click()
}
})
})
});
Keep coding, Marcin
Anindya Mahajan free commented 2 years ago
Hi, thank you for answering.
Your code doesn't work for me as well. It could be because of the 'Select All' checkbox element being dynamically generated for my webpage. It doesn't exist when the webpage is loaded for the first time.
Here's the code I actually used:
$(document).ready(function() {
$('#customratiolist').on('click', $('.select-toggle-all label'), function(){
setTimeout(function(){
if($('#customratiolist .select-toggle-all input[type=checkbox]').is(':checked')) {
$('.btn.btn-sm.selectdefineclass.mbbtnself.waves-effect.waves-light').click()
}
},200)
})
});
Marcin Luczak staff commented 2 years ago
If your Select component or his internal elements are dynamically loaded, then you should initialize it with $('.mdb-select').materialSelect(); when it is added to the page and after that, you can create event listeners for the 'Select all' click.
Anindya Mahajan free commented 2 years ago
I have already added the $('.mdb-select').materialSelect(); line to my code elsewhere. Do I need to include it within this block of code too?
Also, a peculiar thing which I noticed - When I entered this entire block of code in Chrome console (after the list with 'Select All' had been loaded), clicking on 'Select All' didn't do anything at first. However, when I closed the drop down list and reopened it, the required functionality (button auto click) somehow worked.
Marcin Luczak staff commented 2 years ago
If your material select element is added to the DOM after the initial materialSelect() function is invoked, then yes, you have to run this function on every new occurrence of the material select.
For this strange behavior, could you please create a snippet showing your HTML structure and complete js code of it? When I run code from my snippet it works properly in Chrome.
Anindya Mahajan free commented 2 years ago
Hi Marcin, please find my exact code below:
https://mdbootstrap.com/snippets/jquery/anindya_mahajan/3294855#html-tab-view
As you might be able to observe, the button click is simulated only when the drop down select menu is closed and reopened. Could you please help me find why this is happening and how to avoid this altogether?
Thank you! :)
Marcin Luczak staff commented 2 years ago
It seems that syntax $('#table1').on('click', $('.select-toggle-all label'), function(){}) causes this problem, as 'Select all' input label might not be properly selected via this method. Please change it to more precise event handler $('.select-toggle-all span').on('click', function(){}) and everything should work.
Anindya Mahajan free commented 2 years ago
Hi Marcin, I got the code to work by using the 'mouseup' event instead of 'click'. Why doesn't 'click' work though?
Marcin Luczak staff commented 2 years ago
It looks like your delegated event doesn't recognize any click event at all, but does recognize mouseup. To examine that, you can add console.log($(this)) inside your event handler function and you will see nothing happens on 'click' event, and your table is logged on 'mouseup' event. As select elements are checked on click event your mouseup event is called after, thus it can check whether your condition is true or false.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: MDB4 4.19.2
- Device: Acer Predator Laptop
- Browser: Chrome Version 92.0.4515.159
- OS: Windows 10
- Provided sample code: No
- Provided link: No