select All check box to select other checkboxes

[amritbhgt]

Hi ,

I am trying to create a check box which will select all the other checkboxes, but somehow its not working.

if there is any other solution by using a button that would also work for me.

Thanks

{

"type": "Input.Toggle",

"title": "Select All",

"id": "chk_brand_all",

"valueOn": "true",

"valueOff": "false",

"value": "false",

"style": {

"text-align": "center"

}

},

{

"type": "Input.ChoiceSet",

"id": "chk_brand_items",

"class": "chk_brand_items",

"layout": "vertical",

"isMultiSelect": true,

"value": "",

"style": {

"padding": "4px 0 0 5px"

},

"choices": [

{

"title": "Brand",

"value": "Brand"

},

{

"title": "Brand 1",

"value": "Brand 1

},

{

"title": "Brand 2",

"value": "Brand 2"

},

$('#chk_brand_all').on('click', function(){

               if(this.checked) {

                              $('.chk_brand_items .checkbox').each(function(){

                                             this.checked = true;

                              });

               }else{

                              $('.chk_brand_items .checkbox').each(function(){

                                             this.checked = false;

                              });

               }

});

[Benji_PaldiTeam]

Hi @amritbhgt ,

You can use the following script to add a 'Select All' checkbox in Blox:

Blox:

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Input.Toggle",
            "title": "Select All",
            "id": "chk_brand_all",
            "style": {
                "text-align": "center"
            }
        },
        {
            "type": "Input.ChoiceSet",
            "id": "chk_brand_items",
            "class": "chk_brand_items",
            "layout": "vertical",
            "isMultiSelect": true,
            "value": "Brand,Brand 1,Brand 2",
            "style": {
                "padding": "4px 0 0 5px"
            },
            "choices": [
                {
                    "title": "Brand",
                    "value": "Brand"
                },
                {
                    "title": "Brand 1",
                    "value": "Brand 1"
                },
                {
                    "title": "Brand 2",
                    "value": "Brand 2"
                }
            ]
        }
    ],
    "actions": []
}

Widget Script:

widget.on('ready', (sender, args) => {
	
	let chekboxGroup = args.widget.style.currentCard.body[1];
		
	if(chekboxGroup.choices.map(item => item.value).join(',') === chekboxGroup.value){
		$('#chk_brand_all')[0].checked = true;
	} else {
		$('#chk_brand_all')[0].checked = false;
	}
	
	$('#chk_brand_all').click(function(){
		
		if(this.checked) {
			let allValues = chekboxGroup.choices.map(item => item.value).join(',')
			chekboxGroup.value = allValues;
				
		} else {
			chekboxGroup.value = '';
		}
			
		args.widget.redraw();
		
	})
});

You also have the alternative of utilizing the Pladi Advanced Filter plugin. With this plugin, you can incorporate multiple dropdown filters into a single widget and configure each dropdown for single or multiple selections. The plugin offers a diverse range of customization options to tailor the filters according to your needs.

Feel free to reach out if you have further questions, we're always happy to help 🙂
inquiries@paldi.solutions 
Paldi Solutions

[amritbhgt]

where are we calling "chk_brand_items"

in the widget scripts i can just see "chk_brand_all"

[Benji_PaldiTeam]

We don't need to call 'chk_brand_items'. Just need to assign value of all checkbox items to "value" property of "Input.ChoiceSet" in blox, so whatever values we assigned to "value" property separated by comma, corresponding checkboxes will be checked. 

[amritbhgt]

Thanks for the solution, it working fine but in my case  i have 

"body": [

{

"type": "Container",

"items": [

{

"type": "ColumnSet",

"style": {

"padding-left": "10px"

},

"columns": [

{

"type": "Column",

"style": {

"padding": "0px",

"border": "1px solid #000",

"margin": "1px"

},

"items": [

{

"type": "TextBlock",

"text": "Brand",

"style": {

"background-color": "#006ecf",

"color": "#fff",

"text-align": "center",

"padding": "3px"

}

},

{

"type": "Input.Toggle",

"title": "Select All",

"id": "chk_brand_all",

"style": {

"text-align": "center"

}

},

{

"type": "Input.ChoiceSet",

"id": "chk_brand_items",

"class": "chk_brand_items",

"layout": "vertical",

"isMultiSelect": true,

"value": "",

"style": {

"padding": "4px 0 0 5px"

},

"choices": [

{

"title": "brand 1",

"value": "brand 1"

},

{

"title": "brand 2",

"value": "brand 2"

},

[Benji_PaldiTeam · Accepted solution]

In the above case, you need to assign different path to the variable 'chekboxGroup':

let chekboxGroup = args.widget.style.currentCard.body[0].items[0].columns[0].items[2];

You can find this path using browser console. 

• Open the blox widget in edit mode
• Open Browser console
• Type prism.activeWidget.style.currentCard
• Open the object and find your container where checkboxes are placed

Feel free to reach out if you have further questions, we're always happy to help 

inquiries@paldi.solutions 
Paldi Solutions

[amritbhgt]

i am facing one problem in this 

when i select individual check boxes in one column(CAS) and then "select all" in the other column(submisson) , the one i selected in first column(CAS) automatically gets deselected, i think its because args.widget.redraw() staement and vice versa, can you please help in this 

[amritbhgt]

I have one more question related to this.

i have some pre- default selection and if the user makes some more selection and then try to reset it back to default pre-selection can we create a button(Reset choices) for the same