复选框，也叫做CheckBox，是一种基础控件。.NET的工具箱里包含这个控件，它可以通过其属性和方法完成复选的操作。为了完成更多复杂的需求，也出了第三方控件的复选框。只需要将其dll添加到工具箱里，就可以使用更多功能的复选框控件。
工具/原料
html
文本编辑器
浏览器
方法/步骤
1、第一步演示如何使用checkbox在<form></form>标签粝简肯惧内使用<inputtype="checkbox"na罪焐芡拂me=""value=""id="">编辑一组checkbox，通过name获取checkbox数组。根据状态，获得数值。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>checkboxdemo</title><script>functioncreatemenu(){varmenu=document.forms[0].menu;varchoice="";for(i=0;i<menu.length;i++){if(menu[i].checked){choice=choice+menu[i].value+",";}}document.getElementById("list").value="Youhavechoose:"+choice;}</script></head><body><h1>checkboxdemo</h1><form><inputtype="checkbox"name="menu"value="coffee"id="check1">coffee<br><inputtype="checkbox"name="menu"value="milk"id="check2">milk<br><inputtype="checkbox"name="menu"value="cola"id="check3">cola<br><inputtype="checkbox"name="menu"value="juice"id="check4">juice<br><inputtype="button"onclick="createmenu()"value="clickheretocreatethemenu"><br><inputtype="text"style="width:1000px;height:20px"id="list"></form></body></html>
2、对一个checkbox的模式可以通过改变和设置。<styletype="text/css">.checkboxmode1{display:none;}/*******STYLE1*******/.checkboxmode1+label{background-color:lightblue; border:1pxsolid#C1CACA;box-shadow:01px2pxrgba(0,0,0,0.05),inset0px-15px10px-12pxrgba(0,0,0,0.05);padding:10px; border-radius:10px; display:inline-block; position:relative; margin-right:30px;}.checkboxmode1+label:active{ box-shadow:01px2pxrgba(0,0,0,0.05),inset0px1px3pxrgba(0,0,0,0.1);}.checkboxmode1:checked+label{background-color:lightgreen;border:1pxsolid#92A1AC; box-shadow:01px2pxrgba(0,0,0,0.05),inset0px-15px10px-12pxrgba(0,0,0,0.05),inset15px10px-12pxrgba(255,255,255,0.1);color:black;}.checkboxmode1:checked+label:after{content:'\2714';position:absolute;top:0px;left:0px;color:red;width:100%; text-align:center;font-size:1.5em;padding:1px000; vertical-align:text-top;}</style>通过设置checkbox在点击和未点击是的状态设置其模式。必须先将checkbox隐藏。display：none;
3、接下来演示其他样式：<stylety圬桦孰礅pe="text/css">.checkboxmode2{d足毂忍珩isplay:none;}/*******STYLE2*******/.checkboxmode2+label{background-color:orange;padding:18px20px18px23px; box-shadow:inset050px37px-30pxrgba(255,222,197,0.3),0013pxrgba(0,0,0,0.6); border-radius:1000px; display:inline-block; position:relative; border-top:1pxsolid#ECA14F; margin-right:30px; color:black; font-size:0.7em; width:113px; text-shadow:01px0rgba(0,0,0,0.2); border-bottom:1pxsolid#552B09;}.checkboxmode2+label:hover{ border-top:1pxsolid#FC8C1E; background:#FC8C1E; box-shadow:inset0-50px37px-30pxrgba(255,222,197,0.07),0013pxrgba(0,0,0,0.6);}.checkboxmode2+label:active{ border-top:none; background:#FC8C1E; padding:19px20px18px23px; box-shadow:inset03px8pxrgba(129,69,13,0.3),inset0-50px37px-30pxrgba(255,222,197,0.07),0013pxrgba(0,0,0,0.6); }.checkboxmode2+label:after{ content:''; border-radius:100px; width:32px; position:absolute; top:12px; right:12px; box-shadow:inset0px16px40pxrgba(0,0,0,0.4); height:32px;}.checkboxmode2+label:before{ content:''; border-radius:100px; width:20px; position:absolute; top:18px; right:18px; z-index:999; box-shadow:inset0px16px40px#FFF; height:20px; display:none;}.checkboxmode2:checked+label:before{ display:block;}</style><script>functioncheck(){if(document.getElementById("checkbox1").checked){document.getElementById("state").value="checked";}else{document.getElementById("state").value="unchecked";}}</script>
4、<styletype="text/css">饱终柯肢.checkboxmode3{display:none;}/*******STYLE3*******/.che艘早祓胂ckboxmode3+label{ background-color:#fafbfa; padding:9px; border-radius:50px; display:inline-block; position:relative; margin-right:30px; -webkit-transition:all0.1sease-in; transition:all0.1sease-in; width:40px; height:15px;}.checkboxmode3+label:after{ content:''; position:absolute; top:0; -webkit-transition:box-shadow0.1sease-in; transition:box-shadow0.1sease-in; left:0; width:100%; height:100%; border-radius:100px; box-shadow:inset0000#eee,001pxrgba(0,0,0,0.4);}.checkboxmode3+label:before{ content:''; position:absolute; background:white; top:1px; left:1px; z-index:999999; width:31px; -webkit-transition:all0.1sease-in; transition:all0.1sease-in; height:31px; border-radius:100px; box-shadow:03px1pxrgba(0,0,0,0.05),00px1pxrgba(0,0,0,0.3);}.checkboxmode3:active+label:after{ box-shadow:inset00020px#eee,001px#eee;}.checkboxmode3:active+label:before{ width:37px;}.checkboxmode3:checked:active+label:before{ width:37px; left:20px;}.checkboxmode3+label:active{ box-shadow:01px2pxrgba(0,0,0,0.05),inset0px1px3pxrgba(0,0,0,0.1);}.checkboxmode3:checked+label:before{ content:''; position:absolute; left:26px; border-radius:100px;}.checkboxmode3:checked+label:after{ content:''; font-size:1.5em; position:absolute; background:#4cda60; box-shadow:001px#4cda60;}这个复选框一般用于移动客户端的开发，属于App应用。
5、.checkboxmode4{display:none;}/*******STYLE4*******/.checkboxmode4+label{background-color:#FFF; padding:11px9px;border-radius:7px;display:inline-block;position:relative;margin-right:30px;background:#F7836D;width:58px;height:10px;box-shadow:inset0020pxrgba(0,0,0,0.1),0010pxrgba(245,146,146,0.4);}.checkboxmode4+label:before{content:'';position:absolute;background:#FFF;top:0px;z-index:99999;left:0px;width:24px; color:lightgreen;height:32px;border-radius:7px;box-shadow:001pxrgba(0,0,0,0.6);}.checkboxmode4+label:after{content:'off';position:absolute;top:7px;left:37px; font-size:0.5em;color:white; font-weight:bold;left:8px;padding:5px;top:4px;border-radius:100px;}.checkboxmode4:checked+label{background:#67A5DF;box-shadow:inset0020pxrgba(0,0,0,0.1),0010pxrgba(146,196,245,0.4);}.checkboxmode4:checked+label:after{content:'on';left:10px;}.checkboxmode4:checked+label:before{ content:'';position:absolute;z-index:99999; left:52px;}.checkboxmode4+label:after{left:35px;}演示一个可以拖动的复选框
6、以上例子说明，先构建一个类，指定背景颜色background-color，复选框的形状等，或者样式，前提是将默认复选框隐藏。这样设置格式。才能比较好的使用。