单选框，多选框样式，全选全不选，反选，获取所选值

主要注意before和after的样式设置，input要设置id，label要设置for值并且等于相应的input值的id

HTM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{font-size: 14px;color: #555555;font-family: "微软雅黑";}
*{padding: 0px;margin: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;}
input{margin-right:10px;}
.box{ 100%;overflow: hidden;margin-bottom: 20px;}
/*单选框*/
.radio{ 100px;float: left;margin-top: 20px;}
.radio>label{position: relative;margin-left: 50px;}
.radio>input{display: none;}
.radio>label:before{content:''; 14px;height: 14px;border: 1px solid #cacaca;border-radius:50%;display: inline-block;position: absolute;left: -22px;top: 2px;}
.radio>input:checked + label:after{content:''; 8px;height: 8px;display: inline-block;position: absolute;border-radius:50%;background: red;left: -18px;top: 5.5px;}
/*多选框*/
.checkbox{150px;float: left;margin-top: 20px;}
.checkbox>input{display: none;}
.checkbox>label{position: relative;margin-left: 50px;}
.checkbox>label:before{ 14px;height: 14px;border-radius: 2px;display: inline-block;content: '';position: absolute;border: 1px solid #cacaca;left: -22px;top: 2px;}
.checkbox>input:checked +label:after{content:''; 16px;height: 16px;display: inline-block;position: absolute;border-radius:50%;background: url(img/checbox.png)no-repeat center center;left: -21px;top: 1px;}
</style>
</head>
<body>
<div class="box">
　　<h2>单选框样式操作，单选框选中操作</h2>
　　<div class="radio">
　　　　<input type="radio" >我喜欢刘恺威</label>
　　</div>
</div>

</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
//全选或全不选

$("#all").click(function(){

　　if(this.checked){
　　　　$("#list input:checkbox").prop("checked",true);
　　}else{
　　　　$("#list input:checkbox").prop("checked",false);
　　}
});
//全选
$("#selectAll").click(function(){
　　$("#list :checkbox,#all").prop("checked",true);
});
//全不选
$("#unSelect").click(function(){
　　$("#list :checkbox,#all").prop("checked",false);
});
//反选
$("#reverse").click(function(){
　　$("#list :checkbox").each(function(){
　　　　$(this).prop("checked",!$(this).prop("checked"));
　　});
});
//获得选中的所有值
$("#getValue").click(function(){
　　var valArray=[];
　　$("#list :checkbox[checked] + label").each(function(item,obj){
　　　　valArray[item]=$(this).html();//构成数组 ["1.时间都去哪儿了", " 2.海阔天空", " 3.真的爱你"]
　　});
　　var valArray2=valArray.join(",");//字符串 "1.时间都去哪儿了, 2.海阔天空, 3.真的爱你"
　　alert(valArray2)
});

</script>
</html>

单选框，多选框样式，全选全不选，反选，获取所选值

相关推荐