checkbox set to checked = false not working

问题:

I'm generating an HTML input with checked="false", however the checkbox is showing up checked.

I did the following in the javascript console and can't quite figure out whats going on. The resulting HTML after using .prop() to set the value to false looks the same except now the checkbox is not checked on the form.

> $(':input[checked]').prop('checked');
< true
> $(':input[checked]')
< [
<input type=​"checkbox" class=​"caseVal" checked=​"false">​
]
> $(':input[checked]').prop('checked',false);
< [
<input type=​"checkbox" class=​"caseVal" checked=​"false">​
]

I'm under the impression that I should just be setting checked="checked" OR not including the checked property at all if its false is that best practice? Either way I'd like to know what's going on in the above code.

回答1:

Don't put checked="false"

You only put checked="checked" for valid XHTML, otherwise you'd do

<input type="checkbox" checked>

The browser doesn't care what value is assigned to checked attribute, as soon as it sees checked in the checkbox input tag, it's flagged as checked.

回答2:

How to Uncheck in this case, example my code is: (see below)

if(previousHighlightedCheckbox!=null) {
    console.log(sent.id, previousHighlightedCheckbox); // current checkbox and previous check box values are different.
    document.getElementById(previousHighlightedCheckbox).checked = false; // still this does not uncheck previous one
  }