这个得用Html做的
<form action="" method="get">
您喜欢的水果？<br />
<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="3" />梨 </label>
</form>
用了JQ库，样式在style里，不过要配合js用<!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>
用css3可以直接用图片作为背景就可以了，不需要用js。解决方法如下：
1、双击打开HBuilderX开发工具，在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件，修改title标签里的文字内容。
3、在<body></body>标签内，插入一个canvas标签，并设置id属性值。
4、在canvas标签下，添加script标签并初始化canvas对象，调用自带的方法。
5、保存代码并运行项目，打开浏览器查看界面效果，可以发现绘制了一条线。
6、在style标签中，利用ID选择器设置canvas样式，添加背景色设置。
7、再次保存代码文件，并刷新浏览器，可以看到canvas画布背景色发生了改变。
