cancel
Showing results for 
Search instead for 
Did you mean: 

select All check box to select other checkboxes

amritbhgt
8 - Cloud Apps
8 - Cloud Apps
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
test.PNG
{
"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;
                              });
               }
});
 
1 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

Benji_PaldiTeam_0-1701405738805.png

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

[email protected] 
Paldi Solutions

View solution in original post

7 REPLIES 7

Benji_PaldiTeam
11 - Data Pipeline
11 - Data Pipeline

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 🙂
[email protected] 
Paldi Solutions

where are we calling "chk_brand_items"

in the widget scripts i can just see "chk_brand_all"

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. 

Benji_PaldiTeam_0-1701362661788.png

 

Benji_PaldiTeam_2-1701363134113.gif

 

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"
},
 

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

Benji_PaldiTeam_0-1701405738805.png

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

[email protected] 
Paldi Solutions

i am facing one problem in this 

amritbhgt_0-1704319879269.png

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 

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