A big misunderstanding about HTML checkbox

Today it turns out I got a big misunderstanding of HTML checkbox.

I thought <input type="checkbox" value="1"> will check the box, while <input type="checkbox" value="0"> will uncheck the box. Unfortunately, it is not true. The fact is both uncheck the box.

Then I think maybe <input type="checkbox" checked="true"> will check the box while <input type="checkbox" checked="false"> will uncheck the box. But the fact is both check the box.

In fact, the check/uncheck status is not related to the value attribute, but the check attribute. However whatever you set as the value of check attribute, the box got checked. All the following example check the box:

<input type="checkbox" checked="true">


<input type="checkbox"  checked="false">
<input type="checkbox"  checked="1">
<input type="checkbox"  checked="0">
<input type="checkbox"  checked="">

<input type="checkbox" checked>

Only <input type="checkbox" > unchecks the box.

Another misunderstanding about the checkbox is in the html form. I thought <input type="checkbox" name="cbname" value="cbvalue"> will add a name-value pair when posting. However I cannot find the name-value pair at debugging the program. Finally, I got the answer: only checked checkbox generates name-value pair when posting,which means when your server-side code outputs a checked checkbox and the user unchecks that box, the result won’t be passed back to the server side!!!

<input type="checkbox" name="cbname"> will display an unchecked box. When you check it manually, the source code won’t change, but when you click the submit button, a name-value pair is generated as cbname=on. If you do not include a name for the checkbox, you won’t get a name-value pair(this is also true for other form elements such as text input box and button:no name-value pair without a name attribute). So the html checkbox value if checked is not “value=on” for checkbox without a name. Likewise, the html checkbox value if not checked is not “value=off” for checkbox without a name. There is just no such attribute as “value”. <input type="checkbox" name="cbname" value="off" checked> will generate a name-value pair: cbname=off.

Did you like this?
Tip admin with Cryptocurrency