当前位置:嗨网首页>书籍在线阅读

09-显示单选按钮

  
选择背景色: 黄橙 洋红 淡粉 水蓝 草绿 白色 选择字体: 宋体 黑体 微软雅黑 楷体 选择字体大小: 恢复默认

5.5.1 显示单选按钮

你为此编写的HTML代码与迄今为止使用的代码相比,多少是有点不够灵活的。必须使用元素来表示单选按钮,其中单选按钮上的文字使用 <label> 标签的内容。

例如,要显示两个单选按钮用来选择人的性别,如图5-5和图5-6所示,我们编写的HTML代码如下:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
    href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
Sex : <input type=radio name=sex id=m><label for=m>Male</label></input>
    <input type=radio name=sex id=f><label for=f>Female</label></input>
<script>
$("input").button ();
</script>

请注意, <label> 标签的 for 属性的作用是将 <label> 标签中的文字和单选按钮关联在一起。如果忘记了添加这个属性,按钮的选择和取消选择是不会发生的。

37.png

图5-5 单选按钮,两个都没被选中

38.png

图5-6 单选按钮,选中了Male