How do I get the value of checkbox?

Question

HTML :

<input type="checkbox" aria-checked="false" class="cloud-private" value="" data-spm-anchor-id="a800.io">

My java script : ( i want to click this checkbox if it is not checked ,but this does not work )

var z = document.getElementsByClassName('cloud-private'); 
if (z[0].aria-checked=='false'){ 
    z[0].click(); 
}

Does this answer your question? [Get the value of checked checkbox?](https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) — Guy, Jun 09 '22 at 19:15
`this does not work`: how does it fail? Does it do something else? How have you attempted to debug it? Is there an error in your console? — mykaf, Jun 09 '22 at 19:17
`z[0].aria-checked` doesn't do what you think. You can't have `-` in an identifier, that's being treated as the subtraction: `z[0].aria - checked` — Barmar, Jun 09 '22 at 19:23
You really shouldn't be using `aria-checked` at all, should be using the `checked` property. Any question like this can be easily resolved by simply taking the time to read the spec on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox — Stephen M Irving, Jun 09 '22 at 19:33
That doesn't mention anything about aria @StephenMIrving. [The document on aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked) does. — Andy, Jun 09 '22 at 19:42
@Andy I am aware that the checkbox spec does not mention aria, I am saying that this problem could be solved by reading the checkbox spec and the fact that it does not mention aria is proof enough that using aria is not at all how you solve this problem. — Stephen M Irving, Jun 09 '22 at 19:45
Wanted to point this out as well, the aria-checked spec mentions this: "JavaScript is required to toggle the aria-checked". That is to say, when you check or uncheck the box, the `aria-checked` attribute does not automatically change on its own, you have to manually toggle it. This is why using it as a method for determining if a box is checked or not is fundamentally wrong, the coder already knows if it is or not because they are the ones who set it that way. Aria is used for disability-tech accessibility purposes, not for checking or manipulating behavior or state. — Stephen M Irving, Jun 09 '22 at 22:26

score 1 · Accepted Answer · answered Jun 09 '22 at 19:43

Should not be using aria-checked here in this way. Should be using the checked attribute as is shown in the checkbox spec on MDN.

let cloudPrivateCbxs = document.querySelectorAll('.cloud-private');

if (cloudPrivateCbxs && !cloudPrivateCbxs[0].checked) { 
    cloudPrivateCbxs[0].click();
}

Here I used a useful variable names (never use single letter variable names except for simple counters like those in for loops), used querySelectorAll instead of getElementsByClassName, then I first check if the variable contains anything, then I simply check the checked attribute to see if it returns false. It is returning a boolean so I can use the logical NOT operator ! rather than check directly if it is equal to false.

Tks man , your solution works nice !!! – Le Nguyen Jun 09 '22 at 19:45 — Le Nguyen, Jun 09 '22 at 19:45

Andy · Answer 2 · 2022-06-09T19:47:39.347

0

You can use querySelector to find the element with that class, and that aria-checked attribute. Then click it. Just make sure you spell things correctly (aria, not area, for example).

const selector = '.cloud-private[aria-checked="false"]';
const z = document.querySelector(selector);

// If the element exists, check it
z && z.click();

<input type="checkbox" aria-checked="false" class="cloud-private">

edited Jun 09 '22 at 19:47

answered Jun 09 '22 at 19:16

Andy

61,948
13
68
95

You should check if the selector returns anything. – Barmar Jun 09 '22 at 19:24
Hi @Andy ,it does not work , "Uncaught SyntaxError: Identifier 'selector' has already been declared" – Le Nguyen Jun 09 '22 at 19:28
Do you have another variable called `selector` in your code? Just change the name of mine or just add the string directly to the `querySelector`. I only broke it up that way because it looks neater. @LeNguyen – Andy Jun 09 '22 at 19:30
@Andy ,it still not work even change to abc1000 "Uncaught SyntaxError: Identifier 'abc1000' has already been declared" – Le Nguyen Jun 09 '22 at 19:37
Then I have no idea what's going on with your code, sorry. The example clearly works. – Andy Jun 09 '22 at 19:43
1

Tks @Andy , Stephen M Irving 's answer works . – Le Nguyen Jun 09 '22 at 19:46

How do I get the value of checkbox?

2 Answers2