Bind Header checkbox in Bootstrap Table to control the row checkboxes

Hi All,

As the title suggests, I have a Bootstrap table:

What I want to do is bind the header checkbox to function like "select all " or “deselect all” for the row checkboxes. With no luck so far, this is what I have tried.

On click of the header check box

I’m adding a select action on the row, but I’m confused as to what should be the “check” value here

But I’m afraid I’m not sure how to proceed forward. What’s the ideal way to achieve what I’m trying to?

You can do it my adding a condition to the checkbox that is in the table like this:

dmx-bind:checked="cb_header.checked"

So in this case, cb_header is the the checkbox that is in the header. When it is checked, all the checkboxes in the table (for instance) become checked, or unchecked if you uncheck the header.

Here is the full code for the checkbox in the table (for me at elast)

 <div class="custom-control custom-checkbox">
 <input class="custom-control-input" type="checkbox" dmx-bind:id="'cb_people'+$index" dmx-bind:name="'cb_people'+$index" dmx-bind:value="id" dmx-bind:checked="cb_header.checked">
<label class="custom-control-label" dmx-bind:for="'cb_people'+$index"></label>
</div>
</div>
3 Likes

Excellent, thank you Philip. That worked for me. Is there any other way I could have know about this method apart from asking on the forum? It seems like a list of secret codes I don’t know about :joy:

Probably not, but figuring out that you can add dmx-bind to pretty much any of the Wappler functions to make it dynamic goes a long way