javascript实现checkbox复选框实例代码

更新时间：2026-04-09 17:09:20作者：fang

本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作，分享给大家供大家参考，具体内容如下

1、checkbox复选框进行美化操作

复选框默认外表的美观度差强人意，能够满足美观度要求不高的页面，但是如果对于页面要求较为精致，那可能就过于勉强了，下面就一段对复选框进行美化的代码实例，希望能够给大家带来一定的帮助。

代码实例如下：

<!DOCTYPE html>

<html>

<head>

<title>checkbox复选框</title>

.CheckBoxClass{display:none;}

.CheckBoxLabelClass{

background:url("mytest/jQuery/UnCheck.png") no-repeat;

padding-left:30px;

padding-top:3px;

margin:5px;

height:28px;

width:150px;

display:block;

}

.CheckBoxLabelClass:hover{text-decoration:underline;}

.LabelSelected{background:url("mytest/jQuery/Check.png") no-repeat;}

</style>

$(document).ready(function(){

$(".CheckBoxClass").change(function(){

if($(this).is(":checked")){

$(this).next("label").addClass("LabelSelected");

}

else{

$(this).next("label").removeClass("LabelSelected");

}

});

})

</script>

</head>

<body>

<div>

<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">爱吾源码一</label>

<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">爱吾源码二</label>

</div>

</body>

</html>

2、checkbox复选框全选和取消全选实例代码

关于复选框的全选和不全选是非常常见的操作，本章节分享一段代码实例，能够实现多种选中和取消选中功能。

代码实例如下:

<!DOCTYPE html>

<html>

<head>

$("document").ready(function(){

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

if(this.checked)

{

$("input[name='checkbox']").each(function(){this.checked=true;});

$("#btn1").attr("value","反选");

}

else

{

$("input[name='checkbox']").each(function(){this.checked=false;});

$("#btn1").attr("value","全选");

}

});

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

$("[name='checkbox']").attr("checked",'true');

})

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

$("[name='checkbox']").removeAttr("checked");

})

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

$("[name='checkbox']:even").attr("checked",'true');

})

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

$("[name='checkbox']").each(function(){

if($(this).attr("checked"))

{

$(this).removeAttr("checked");

}

else

{

$(this).attr("checked",'true');

}

})

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

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

})

alert(str);

})

</script>

</head>

<body>

<br>

爱吾源码一

爱吾源码二

爱吾源码三

爱吾源码四

爱吾源码五

爱吾源码六

爱吾源码七

爱吾源码八

</form>

</body>

</html>

以上就是关于checkbox复选框的全部内容，希望对大家的学习有所帮助。