Introduction to HTML checkboxes and radio buttons checkbox and radio events_Basic knowledge

The event selection of checkbox and radio once confused me.

Based on my understanding of js, I think the change event should be the most reasonable. Unfortunately, ie, the change event is only triggered when the focus leaves after the change.
Later, mouse events such as click mousedown were used instead. I found that click is more perfect than mousedown:

After radio registers the click event, the magic is that when you select up, down, left, and right on the keyboard, the mouse event will be triggered, and the scroll wheel will also be triggered. This magical thing This will not happen under mousedown. (Webkit cannot use up, down, left, and right selections)
After the checkbox registers the click event, the miracle happens again. When we select the checkbox with a space, the magical click event is triggered again, and the mousedown misses the miracle again. (Webkit still cannot use spaces to select)

Let us all use click to reduce the burden on these two guys. Don’t bind a bunch of events to them because of their inherent shortcomings. For these two guys, click is the best Almighty. Worship~~~

When designing a questionnaire using a form, in order to reduce user operations, it is a good idea to use a select box. There are two select boxes in the tag of HTML, namely single The difference between a select box and a check box is that users can only select one option in a radio button box, while users can select multiple options in a check box, or even select all of them. Please look at the following example:

The source code of this example is given below. Combined with the code, the settings of each parameter are discussed:

Do you like traveling? ? Please select:

Copy code The code is as follows:

Like
Dislike
Doesn't matter

Which sports are you interested in? Please select:

Copy Code The code is as follows:

running
playing ball
climbing
Bodybuilding

As can be seen from the source code above, making To make a radio button, just set the type parameter of the tag to type="radio"; to make a check box, just set the type parameter of the tag to type="checkbox". As for the type of selection box used in actual applications, it must be determined according to actual needs. If the user only needs one choice, use a radio button. For example, in this example, "Do you like traveling?" The user can only choose one option, so a radio button is used; if the user is allowed to have multiple choices, For the selected content, check boxes are used. For example, in this example, the question "What sports are you interested in?" is used because a person's interests may be multi-faceted, so check boxes are used.

Set the checked parameter in the tag, and the box will be selected by default. For example, the first radio button box in this example (the radio button box under "Like") is set to be selected by default, so that if the user wants to select "Like", they do not need to select it again. Of course, if the user wants to select If you "dislike", just click the radio button under "dislike", and the default value will be automatically cancelled. You can also set a checkbox to be selected by default using the same method. However, the default selection of the check box cannot be abused, otherwise it will cause user resentment.

In radio, be sure to remember to set the name attributes of all objects to the same, for example, name="radiobutton" in the above example, note It is not an ID attribute. Only in this way can the single-select effect be achieved. Otherwise, the 'like', 'dislike' and 'indifferent' in the above example can be selected at the same time. Remember!