jQuery操作checkbox选中状态代码_美化

jQuery操作checkbox选中状态_案例_代码

 

jQuery操作checkbox选中状态_案例

效果可以在底部演示地址里面查看,如果大家想美化checkbox,可以隐藏checkox,点击li的时候同时用jQuery添加一个class,当然class需要你提前写好,加个漂亮的选中图标。

HTML

<div class="demo">
<form>
<ul>
<li>
<input type="checkbox" name="box" value="1" />
</li>
<li>
<input type="checkbox" name="box" value="2" />
</li>
<li>
<input type="checkbox" name="box" value="3" />
</li>
</ul>
<input type="submit" value="提交"/>
</form>
</div>

CSS

.demo{width:500px;margin:100px auto;height:50px;line-height:50px;text-align:center;}
 .demo ul{list-style:none;}
 .demo ul li{display:inline-block;;width:50px;text-align:center;height:50px;border:1px solid #eee;cursor: pointer;background: #ff0 url(images/1034.png) no-repeat center;position:relative;overflow:hidden;}
 .demo ul li.active{background:#ff0 url(images/1033.png) no-repeat center;}
 .demo ul li input{position:absolute;left:0;top:-50px;}

jQuery

$(document).ready(function(){
$(".demo ul li").click(function(){
 if($(this).children().is(":checked")){
 $(this).children().prop("checked",false);
 $(this).removeClass("active");
 }else{
 $(this).children().prop("checked",true);
 $(this).addClass("active");
 }
 })
})

 

????

标签: