<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<style>
.div1{
text-align: center
background: beige
width: 50px
height: 28px
border-radius: 14px
}
.span1{
/* margin-top: 7px*/ /* div的时候打开注释 */
background: #CCCCCC
width: 13px
height: 13px
display: inline-block
border-radius: 7px
}
.div2{
text-align: center
background: lawngreen
width: 50px
height: 28px
border-radius: 14px
}
.span2{
background: white
width: 13px
height: 13px
display: inline-block
border-radius: 7px
}
.hid1{
display: none
}
.hid2{
}
</style>
<body>
<!-- button的 -->
<button class="div1">
<span class="hid1">是</span>
<span class="span1"></span>
<span class="hid2">否</span>
</button>
<hr>
<hr>
<!-- div的 -->
<!-- <div class="div1">
<span class="hid1">是</span>
<span class="span1"></span>
<span class="hid2">否</span>
</div>-->
</body>
<script>
$(function(){
$(".div1").click(function(){
$(".span1").toggleClass("span2")
$(".div1").toggleClass("div2")
$(".hid1").toggle()
$(".hid2").toggle()
})
})
</script>
</html>
简单的代码实现，仅供参考：
单选框：
<body> <input type="radio" name="sex" value="n" /> <input type="radio" name="sex" value="v" /></body>
复选框：
<body> <input type="checkbox" value="n" /> <input type="checkbox" value="v" /></body>
下拉框：
<body> <select> <option>n</option> <option>n</option> <option>n</option> </select></body>
扩展资料：
css注意事项
1、每个标签的属性设置必须是被一对花括号包含。像下面的样子：
标签
{
属性名称：属性值
}
2、花括号中每个属性值赋值后必须用分号隔开。分号就相当于C#和C中的分号，指示一行语句的结束，加上分号就是和网页的解释器说明这个属性的赋值已经结束了，下面开始一个新的属性的赋值。正确的格式是下面的样子：
标签
{
属性名称1：属性值
属性名称2：属性值
属性名称3：属性值
}
3、关于颜色值。我们在前面的文章中，在设置style时，不论是color属性还是background-color属性，赋值时都是指定的颜色名称。这种方式在网页编程中比较不通用。比较常用的做法是赋16进制值，类似于#RRGGBB这种样式，每一位的取值都是从1到F，每两位对应一类颜色值。具体的颜色值可以在网上搜到。
4、关于字体。我们在style中的font-family中设置字体。有时候我们设置的字体可能用户电脑中没有，这时候我们可以在font-family中设置多个可选字体，用逗号分隔，这样如果前面的字体用户电脑中没有，则可以使用后面的字体进行替换。下面是个例子：
<p sytle="font-family:serif,Cursive,Fantasy">
参考资料来源：百度百科：CSS
