成组的单选框radio、成组的复选框checkbox以及区别

单选框radio、复选框checkbox均是可勾选的组件,但成组出现时——单选框radio只允许选中某一个状态;而复选框checkbox可以同时选中多个状态。

--------------------------------------------------------------------------------------------------

input控件的type设置为radio,控件类型即为单选框,默认被渲染成空圆圈,选中时空心圆圈中有一个黑实点。

当多个单选框radio的name属性设置为同一个值时,则它们会被认为是一个组的单选框,只有某一个状态的单选框可以被选中,其他状态显示为未选中状态。为了区分不同的radio组件,需要给每一个radio设置不同的value。submit提交到服务器的数据只是被勾选中的radio的数据。

 

 

 

--------------------------------------------------------------------------------------------------

input控件的type设置为checkbox,控件类型即为复选框。

当多个复选框checkbox的name属性设置为同一个值时,则它们会被认为是同一个组的复选框,与单选框不同的是,同一组的复选框可以同时被选中多个状态。为了区分不同的checkbox组件,需要给每一个checkbox设置不同的value。submit提交到服务器的数据是Array类型,包含所有被选中的组件数据。

 

 

--------------------------------------------------------------------------------------------------

注意:

单选框选中后无法取消,只能通过选中同组的其他radio单选框来取消;而复选框可以通过再次点击来取消当前选中。

因此,当需要取消选中操作的场景应用中,应该使用checkbox,而不是radio。例如:登录时的“记住密码”选项。

 

posted @ 2020-06-09 21:50  xuwennn  阅读(3005)  评论(0编辑  收藏  举报