You are viewing limited content. For full access, please sign in.

Question

Question

Select All Yes option

asked on May 20, 2019

I have a table with Approved check box, values Yes and No. I have "Check All" button at the bottom of the form. When I click on the button, I want the checkboxes to select "Yes" in all the rows. What is the best way to do this please? Thanks.

 

Priya

0 0

Replies

replied on May 20, 2019 Show version history

You just need to hook into the "approve all" check box's checked event.

Give this a try.

$(document).ready(function(){
  	$("#Field11-0").on("change", function() {
		$(".approved input[type='checkbox']").prop("checked", this.checked)
	});
});

You'll need to adjust it to fit your field names.

EDIT: You'll also need to add the "approved" class name to the table column that contains the check boxes.

1 0
replied on May 20, 2019

Thanks

0 0
replied on May 21, 2019

It is actually a Radio button with Yes No values. So, if I use something like below, how do I ask it to select Yes option please?

 $(".approved input[type='radio']").prop("checked", this.checked)

 

Thanks

Priya

0 0
replied on May 21, 2019

You use the code I originally posted. It sets up an event handler that watches the target field. In that case, my field was called Field11-0, and the code watches for it to change, and then finds all of the check boxes. You got it right by changing the input type to radio. That should get what you want.

0 0
replied on May 22, 2019

What type of field is Field11-0? In my case I have a button click on which it has to happen.

 

Thanks

Priya

0 0
replied on May 22, 2019

In my form, I used a check box. Can you post a screenshot? Then we could have a better idea of what events you need to implement.

0 0
replied on May 22, 2019

Sure. Please see attached. When I click "Approve All Merit", I want all Approved say Yes next to Merit. When I click "Approve All Admin Leave", I want all Approved say Yes next to Admin Leave. 

Dept Head.PNG
Dept Head.PNG (19.04 KB)
0 0
replied on May 22, 2019

Cool, it makes sense now!

I threw together a quick proof of concept.

For the "Approved" column, I clicked Field options and then Advanced and added the merit-approved CSS class.

My buttons are made with a Custom HTML field containing the following markup

<button id="approve-all" type="button">Approve All</button>
<button id="clear-all" type="button">Clear All</button>

Then, over on the CSS and JavaScript tab, I added the following in the JavaScript code editor.

$(document).ready(function(){
  	$("#approve-all").click(function() {
		$(".merit-approved input[type='radio'][value='yes']").prop("checked", true)
	});
  
  	$("#clear-all").click(function() {
		$(".merit-approved input[type='radio'][value='no']").prop("checked", true)
	});
});

Please give this a try, and let us know how it goes.

0 0
replied on May 22, 2019

Thanks

0 0
replied on May 21, 2019

Any update please?

 

Thanks

Priya

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.