Introduction to the HTML check box and single-dataset checkbox and radio events

The choice of checkbox and radio events once confused me.

In my understanding of js, I think the change event should be the most reasonable. Unfortunately, the change event in ie is triggered only when the focus leaves after the change.
Later, click mousedown and other mouse events were used. Click is more perfect than mousedown:

After radio registers the click event, the magic is that when the upper, lower, and left buttons on the keyboard are selected, the mouse event is triggered, and the scroll wheel is also triggered, this magical thing won't happen under mousedown. (Webkit cannot be selected from top to bottom)
After the checkbox registers the click event, the miracle is staged again. When we select the checkbox with spaces, the magic click event is triggered again, and the mousedown is wiped by the miracle again. (Webkit still cannot be selected with spaces)

Let's use click to reduce the burden on the two brothers. Don't bind them with a bunch of events for their inherent shortcomings. click is omnipotent for these two guys. Worship ~~~

When using a form to design a questionnaire, it is a good idea to use a selection box to reduce user operations. There are two selection boxes in the HTML <input> tag, namely, single choice and check boxes, the difference between the two is that option users in a single queue can only select one option, and option users in the check box can select any number or even all. See the following example:

The source code of this example is given below, and parameters are set in combination with the code:
<Form name = "form1">
Do you like traveling? Select:
Copy codeThe Code is as follows:
<Input type = "radio" name = "radiobutton" value = "radiobutton" checked> like
<Input type = "radio" name = "radiobutton" value = "radiobutton"> dislike
<Input type = "radio" name = "radiobutton" value = "radiobutton"> no matter <br>

If you are interested in those sports, please select:
Copy codeThe Code is as follows:
<Input type = "checkbox" name = "checkbox1" value = "checkbox"> running
<Input type = "checkbox" name = "checkbox2" value = "checkbox"> play
<Input type = "checkbox" name = "checkbox3" value = "checkbox"> mountaineering
<Input type = "checkbox" name = "checkbox4" value = "checkbox"> bodybuilding <br>
</Form>


From the source code above, we can see that you only need to set the type parameter of the <input> flag to type = "radio" when creating a ticket; to create a check box, you only need to set the type parameter marked by <input> to type = "checkbox. The selection box used in practical applications depends on actual needs. If you only need one option, use a single region. In this example, "Do you like traveling ?" This problem is caused by a single choice. If you are allowed to have multiple options, use the check box. In this example, "are you interested in those sports ?" This problem occurs because one person may be interested in many aspects, so the check box is used.

When the checked parameter is set in the <input> flag, the selected box is selected by default. In this example, the first single sequence ("like" The single sequence below) is set to the default one, so that if you want to select "like", you don't have to select another one. Of course, if you want to select "dislike", you only need to click the single region under "dislike", and the default value is automatically canceled. In the same way, you can set a check box to be selected by default. However, by default, the check box cannot be abused. Otherwise, it will arouse users' dislike.

In radio, remember to set the name attribute of all the <input type = 'Radio '> objects to the same one, for example, name = "radiobutton" in the previous example ", remember that it is not the ID attribute. Only in this way can we achieve the effect of single choice. Otherwise, you can select "like", "dislike", and "indifferent" in the above example at the same time. Remember!