topic Re: how to programmatically uncheck checkboxes? in ArcGIS JavaScript Maps SDK Questions

how to programmatically uncheck checkboxes?

DanielSchatt — Wed, 17 Feb 2016 15:58:21 GMT

hi, I'm new to the Javascript API and just trying to programmatically uncheck checkboxes. An example of my code (using a checkbox with id "slrbxC") is::

document.getElementbyId("slrbxC").checked = false;

But the checkbox is not unchecking. Is there some other code I need to add to make this happen?

Thanks!

Dan

Re: how to programmatically uncheck checkboxes?

RyanSellman — Wed, 17 Feb 2016 16:04:05 GMT

Hey Dan,

Have you tried:

document.getElementById("slrbxC").checked = false;

Note, "By" in "getElementById" should be capitalized.

Ryan

Re: how to programmatically uncheck checkboxes?

DanielSchatt — Wed, 17 Feb 2016 16:07:56 GMT

thanks Ryan, my typo in my post here but yes I did have it capitalized in my code...

Re: how to programmatically uncheck checkboxes?

KenBuja — Wed, 17 Feb 2016 16:14:20 GMT

You generally have to change a property with the "set" method

document.getElementById("slrbxC").set("checked", false);

Re: how to programmatically uncheck checkboxes?

JoelBennett — Sat, 11 Dec 2021 08:45:03 GMT

What you are doing (aside from the aforementioned typo) is correct...so it may be a problem with the ID value you're passing. If you're using ASP.NET or something similar, an ID you assign can be transformed with an added prefix.

In place of the line you have, try this below. It'll let know what the actual ID is if this is the case. If you get the "element not found" alert, then it couldn't find the checkbox at all, which is a different problem altogether...

var inputs = document.getElementsByTagName("INPUT");
var found = false;
var input;

for (var x = 0; x < inputs.length; x++) {
 input = inputs;
 if ((input.type) && (input.type.toLowerCase() == "check") && (input.id.indexOf("slrbxC") >= 0)) {
  input.checked = false;
  alert("Set...id = [" + input.id + "]");
  found = true;
  break;
 }
}

if (!found)
 alert("element not found...");

Re: how to programmatically uncheck checkboxes?

JeffJacobson — Sat, 11 Dec 2021 08:45:06 GMT

Aside from your typo, your code should work as long as the ID property is correct.

// Either of these should work
document.getElementById("myCheckBox").checked = false;
document.getElementById("myCheckBox").removeAttribute("checked");

To make sure you have the ID correct, this code snippet will list all of the checked items and log their ids to the console. (If you're using IE 11 or below, you'll need to use a for loop instead of Array.from.)

var checkedItems = document.querySelectorAll(":checked");
Array.from(checkedItems, function(cb){
    console.debug(cb.id);
});

Re: how to programmatically uncheck checkboxes?

KenBuja — Wed, 17 Feb 2016 20:33:02 GMT

Also, you should use the syntax

dijit.byId("slrbxC")

to get the reference of the checkbox.

Here's a working sample: JS Bin - Collaborative JavaScript Debugging

Re: how to programmatically uncheck checkboxes?

TyroneBiggums — Thu, 18 Feb 2016 12:06:49 GMT

You could try to use dev tools (F12) and make sure that your ID is correct once your stuff is running.

Re: how to programmatically uncheck checkboxes?

DanielSchatt — Thu, 18 Feb 2016 16:33:07 GMT

I appreciate the tips from everyone! Based on the code given above, apparently it's not finding the id. I haven't learned to use the debugging tools yet but before digging into that, here's my check box declaration:

var slrBoxC = new CheckBox({

id: "slrbxC"

name: "slrbxC"

});

did I do this wrong somehow? shouldn't the id value be "slrbxC" or am I missing something? Thanks again..

Re: how to programmatically uncheck checkboxes?

KenBuja — Thu, 18 Feb 2016 16:42:05 GMT

If using the code from my example doesn't work, can you post an example of your code that shows the issue?

Re: how to programmatically uncheck checkboxes?

TyroneBiggums — Thu, 18 Feb 2016 17:11:00 GMT

I didn't realize you were using dojo's checkbox dijit. There are a couple of things you could try.

First, check to see if your line of code in your original post is inside of a dojo/domReady. Is it possible that you are referencing an object that does not exist yet? Keep in mind that some things (not necessarily this one) occur asynchronously. If you reference a dom element by id that hasn't rendered completely, there is no dom element to reference.

You could add an onChange event to your checkbox. This documentation is pretty terrible but, https://dojotoolkit.org/reference-guide/1.10/dijit/form/CheckBox.html#

I would sooner use straight up javascript (or jQuery) create checkbox before using a dojo dijit for a dom element like that... especially after I played with the example on dojotoolkit.org for a little bit.

Re: how to programmatically uncheck checkboxes?

DanielSchatt — Thu, 18 Feb 2016 17:11:02 GMT

thanks Ken! Appreciate your time. Well I guess this is another question: I'd like to post my code but I'm new to GeoNet and I don't see how to post blocks of code that are easy to read. The old ESRI forums had a "code" button that wrapped your code up and made it easy to post and read there but I don't see anything like that here. Am I missing something? Sorry, thanks again.

Re: how to programmatically uncheck checkboxes?

TyroneBiggums — Thu, 18 Feb 2016 17:15:34 GMT

Click reply.

Click "use advanced editor" on the upper right of your little input window.

Click the >>.

Select a javascript.

Re: how to programmatically uncheck checkboxes?

JeffJacobson — Sat, 11 Dec 2021 08:45:09 GMT

I also did not realize you were referring to the Dojo checkbox dijit rather than a regular HTML checkbox. The sample below shows how each type of checkbox can be programmatically checked.

I agree with @Tyrone Biggums in that I would just use a regular HTML checkbox rather than the Dojo checkbox, as the Dojo checkbox just adds an extra layer of complexity.

<input type="checkbox" id="dojoCheckbox" checked="checked" />
<input type="checkbox" id="normalCheckbox" checked="checked" />
<button type="button" id="theButton">
  Toggle the checkboxes
</button>

require(["dijit/form/CheckBox", "dijit/registry"], function(CheckBox, registry) {
  // Create the Dojo checkbox
  var cb = new CheckBox({
    checked: true
  }, "dojoCheckbox");
  // Get a reference to the button.
  var b = document.getElementById("theButton");

  // set the button click event
  b.onclick = function() {
    // Use the registry to get the checkbox dijit.
    cb = registry.byId("dojoCheckbox");
    // Set the dojo checkboxes "checked" property to be 
    // opposite what it currently is.
    cb.set("checked", !cb.checked);
    // Get the regular checkbox and check it.
    var ncb = document.getElementById("normalCheckbox");
    ncb.checked = !ncb.checked;
  };
});

Re: how to programmatically uncheck checkboxes?

Kathleen_Crombez — Thu, 18 Feb 2016 18:09:03 GMT

The way you are declaring the checkbox, it looks like it is a dojo checkbox and would more than likely need to be access with Ken Buja solution.

dijit.byId("slrbxC").set("checked", false);

Re: how to programmatically uncheck checkboxes?

KenBuja — Thu, 18 Feb 2016 18:15:32 GMT

The other way you can do this is to put it on a site like JSBin or JSFiddle.

Re: how to programmatically uncheck checkboxes?

DanielSchatt — Thu, 18 Feb 2016 20:00:03 GMT

Thanks much to Jeff, Tyrone, Ken, and everyone else for the help! After much trial and error, this is the syntax that worked:

var slrBoxC = new Checkbox({

id: "slrbxC",

name: "slrbxC"

});

slrBoxC = registry.byId("slrbxC");

slrBoxC.set("checked", false);