Creating a Single Check All/Check None check box

Community Beginner ,
Jan 20, 2018

Copy link to clipboard

Copied

I have a PDF with a large number of pages, each page of which has its own set of 10–15 named check boxes. These need to be checkable in any combination and independent of one another. However, I'd also like to create a single Check All box on each page that, on the first click that marks the Check All box, places a check in all boxes on the page and, on second click that clears the Check All box, clears all boxes on the page. How do I do this?

At the moment, I have it so each page has separate Check All and Check None boxes. This is more or less functionally fine, but looks clumsy across so many pages and seems to confuse some users. Currently, I'm using Actions --> Mouse Up --> Run a JavaScript with the following scripts.

For Check All box:

if (event.target.value == "Yes")

    this.getField ("CheckNone").value = "No"

    this.getField ("Item1").value = "Yes"

    this.getField ("Item2").value = "Yes"

    this.getField ("Item3").value = "Yes"

    this.getField ("Item4").value = "Yes"

    this.getField ("Item5").value = "Yes"

This checks all boxes on the page and forces the Check None to be cleared. If this box is checked a second time, the tick disappears but all items on the page are checked again (assuming some have been manually cleared).

For Check None box:

if (event.target.value == "Yes")

    this.getField ("CheckAll").value = "No"

    this.getField ("Item1").value = "No"

    this.getField ("Item2").value = "No"

    this.getField ("Item3").value = "No"

    this.getField ("Item4").value = "No"

    this.getField ("Item5").value = "No"

This unchecks all boxes on the page, including Check All, and leaves a cross in Check None. If this box is checked a second time, the cross disappears but all items on the page are unchecked again (assuming some have been manually checked).

In other words, I'd like to merge the functionality of these two scripts into one on alternating clicks. I hope this makes sense. Thank you!

Joel's solution is certainly more elegant, but here is another... you could remove the "CheckNone" box and have one box either check all or check none by adding an else condition to your mouse up script:

if (event.target.value == "Yes") {

     getField("Item1").checkThisBox(0,true);

     getField("Item2").checkThisBox(0,true);

     getField("Item3").checkThisBox(0,true);

     getField("Item4").checkThisBox(0,true);

     getField("Item5").checkThisBox(0,true);

}

else {

     getField("Item1").checkThisBox(0,false);

     getField("Item2").checkThisBox(0,false);

     getField("Item3").checkThisBox(0,false);

     getField("Item4").checkThisBox(0,false);

     getField("Item5").checkThisBox(0,false);

}

OR you could loop through the item names... (also would go in mouse up action of CheckAll)

for (i = 1; i < 6; i++) {

     if (event.target.value == "Yes") {

          getField("Item" + i).checkThisBox(0,true);

     }

     else if (event.target.value !== "Yes") {

          getField("Item" + i).checkThisBox(0,false);

     }

}

Hope that helps!

TOPICS
Acrobat SDK and JavaScript, Windows

Views

544

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Creating a Single Check All/Check None check box

Community Beginner ,
Jan 20, 2018

Copy link to clipboard

Copied

I have a PDF with a large number of pages, each page of which has its own set of 10–15 named check boxes. These need to be checkable in any combination and independent of one another. However, I'd also like to create a single Check All box on each page that, on the first click that marks the Check All box, places a check in all boxes on the page and, on second click that clears the Check All box, clears all boxes on the page. How do I do this?

At the moment, I have it so each page has separate Check All and Check None boxes. This is more or less functionally fine, but looks clumsy across so many pages and seems to confuse some users. Currently, I'm using Actions --> Mouse Up --> Run a JavaScript with the following scripts.

For Check All box:

if (event.target.value == "Yes")

    this.getField ("CheckNone").value = "No"

    this.getField ("Item1").value = "Yes"

    this.getField ("Item2").value = "Yes"

    this.getField ("Item3").value = "Yes"

    this.getField ("Item4").value = "Yes"

    this.getField ("Item5").value = "Yes"

This checks all boxes on the page and forces the Check None to be cleared. If this box is checked a second time, the tick disappears but all items on the page are checked again (assuming some have been manually cleared).

For Check None box:

if (event.target.value == "Yes")

    this.getField ("CheckAll").value = "No"

    this.getField ("Item1").value = "No"

    this.getField ("Item2").value = "No"

    this.getField ("Item3").value = "No"

    this.getField ("Item4").value = "No"

    this.getField ("Item5").value = "No"

This unchecks all boxes on the page, including Check All, and leaves a cross in Check None. If this box is checked a second time, the cross disappears but all items on the page are unchecked again (assuming some have been manually checked).

In other words, I'd like to merge the functionality of these two scripts into one on alternating clicks. I hope this makes sense. Thank you!

Joel's solution is certainly more elegant, but here is another... you could remove the "CheckNone" box and have one box either check all or check none by adding an else condition to your mouse up script:

if (event.target.value == "Yes") {

     getField("Item1").checkThisBox(0,true);

     getField("Item2").checkThisBox(0,true);

     getField("Item3").checkThisBox(0,true);

     getField("Item4").checkThisBox(0,true);

     getField("Item5").checkThisBox(0,true);

}

else {

     getField("Item1").checkThisBox(0,false);

     getField("Item2").checkThisBox(0,false);

     getField("Item3").checkThisBox(0,false);

     getField("Item4").checkThisBox(0,false);

     getField("Item5").checkThisBox(0,false);

}

OR you could loop through the item names... (also would go in mouse up action of CheckAll)

for (i = 1; i < 6; i++) {

     if (event.target.value == "Yes") {

          getField("Item" + i).checkThisBox(0,true);

     }

     else if (event.target.value !== "Yes") {

          getField("Item" + i).checkThisBox(0,false);

     }

}

Hope that helps!

TOPICS
Acrobat SDK and JavaScript, Windows

Views

545

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 20, 2018 0
Adobe Community Professional ,
Jan 20, 2018

Copy link to clipboard

Copied

Oddly enough, right now I'm working on a JavaScript Library that does exactly that. Take a look at the file below.

The top two lists do what I think you are looking for, the bottom left binds the enabled (readonly) property of the child fields to the checkbox. The bottom right list is't working yet but that one will bind the visibility of the children.

Once the Library is added to the PDF, you simply add 2 lines of code to create the behavior. In this file the code looks like this...

var colorsCheckBox = new PPDFCheckBox(this.getField("colors"));

colorsCheckBox.bindValues(["red", "blue", "green"]);

var fruitsCheckBox = new PPDFCheckBox(this.getField("fruits"));

fruitsCheckBox.bindValues(["apples", "grapes", "bananas", "oranges", "lemons"]);

Link to pPDF_BoundCheckBoxes_BetaDemo.pdf

https://adobe.ly/2DUjT5l

This demo uses a box for a partially selected list but the Library will allow you to change that.

If this is the behavior you are looking for, let me know and I'll get you an early version to play with and test.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 20, 2018 2
Community Beginner ,
Jan 21, 2018

Copy link to clipboard

Copied

Thank you so much for your response. This is excellent! The top two lists capture what I was looking for regarding Check All/Check None very well and is so easy to use that it shouldn't confuse anyone. I had hoped it would be a simple solution to change the JavaScript code (as in, I'd overlooked something obvious), but at least it's possible.

Joel_Geraci  wrote

This demo uses a box for a partially selected list but the Library will allow you to change that.

If I'm understanding you correctly here, you mean that the Library would allow it so that any of the individual items (on the first list, red/green/blue) can be checked without automatically checking the Check All (colors) box? That would be ideal for my scenario, as I'm using the Check All to refer to a set of items the user owns (meaning if they own the set, they own all items in it) but having one item does not equate to owning the set, if that makes sense.

If I get this working as I'd like, is the JavaScript Library something contained entirely within the PDF? It's obviously easier if the users don't need anything more than the PDF to have the Check All function correctly. Less risk of user error that way!

Regardless, I'd love to test this. Thank you again for your help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2018 0
Adobe Community Professional ,
Jan 21, 2018

Copy link to clipboard

Copied

If you are looking to simply allow check all or check none, I'd suggest you use a buttons rather than a check box. From a UI perspective, it's cleaner and there's no confusion as to what the main checkbox means when only some of the "children" check boxes are checked.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2018 1
Adobe Community Professional ,
Jan 21, 2018

Copy link to clipboard

Copied

Clever Stuff !! 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2018 0
Explorer ,
Jan 21, 2018

Copy link to clipboard

Copied

Joel's solution is certainly more elegant, but here is another... you could remove the "CheckNone" box and have one box either check all or check none by adding an else condition to your mouse up script:

if (event.target.value == "Yes") {

     getField("Item1").checkThisBox(0,true);

     getField("Item2").checkThisBox(0,true);

     getField("Item3").checkThisBox(0,true);

     getField("Item4").checkThisBox(0,true);

     getField("Item5").checkThisBox(0,true);

}

else {

     getField("Item1").checkThisBox(0,false);

     getField("Item2").checkThisBox(0,false);

     getField("Item3").checkThisBox(0,false);

     getField("Item4").checkThisBox(0,false);

     getField("Item5").checkThisBox(0,false);

}

OR you could loop through the item names... (also would go in mouse up action of CheckAll)

for (i = 1; i < 6; i++) {

     if (event.target.value == "Yes") {

          getField("Item" + i).checkThisBox(0,true);

     }

     else if (event.target.value !== "Yes") {

          getField("Item" + i).checkThisBox(0,false);

     }

}

Hope that helps!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2018 1
Community Beginner ,
Jan 21, 2018

Copy link to clipboard

Copied

Thank you so much for your help, Alliosaaa. I originally thought an if/else would be the most likely and straightforward option, but couldn't get it to work right. Your first suggestion works exactly as intended. A user can check five individual items if they want, then later Check All on the page, then clear the page if they made a mistake—no confusion. I imagine your second suggestion would work as well, but the first script is much cleaner and easier to copy, paste and adjust the names. This is wonderful!

Thank you Joel and Thom for your responses as well.

Joel, at one stage I'd tried using buttons rather than check boxes, but found the check boxes were almost perfect in how they behaved and seemed to be more consistent depending on the user's Reader program. I agree it's probably cleaner, though, but I'm really happy with this outcome.

Thom, I've tested your solution and found it would also work exactly as intended (except with the hitch that the very first child item will not clear when Check All is unchecked, even though all of the other items behaved as I'd hoped—I imagine that's something I've overlooked in my haste or is an easy enough fix). Obviously, your solution would require a bit more work than Alliosaaa's to change both the export value and the code, but I really appreciate your response.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2018 0
Adobe Community Professional ,
Jan 21, 2018

Copy link to clipboard

Copied

This issue has come up several times. Here's one recent very simple, straight forward solution.

Simultaneously check/uncheck two checkboxes with different names-always checked or unchecked togethe...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 21, 2018 1