javascript实现checkbox复选框实例代码
本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作，分享给大家供大家参考，具体内容如下
1、checkbox复选框进行美化操作
复选框默认外表的美观度差强人意，能够满足美观度要求不高的页面，但是如果对于页面要求较为精致，那可能就过于勉强了，下面就一段对复选框进行美化的代码实例，希望能够给大家带来一定的帮助。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkbox复选框</title>
<style type="text/css">
.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>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(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>
<input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">小牛知识库一</label>
<input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">小牛知识库二</label>
</div>
</body>
</html>
2、checkbox复选框全选和取消全选实例代码
关于复选框的全选和不全选是非常常见的操作，本章节分享一段代码实例，能够实现多种选中和取消选中功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>小牛知识库</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$("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>
<form name="form1" method="post" action="">
<input type="checkbox" id="all" name="all">
<input type="button" id="btn1" value="全选">
<input type="button" id="cancel" value="取消全选">
<input type="button" id="jishu" value="选中所有奇数">
<input type="button" id="fanxuan" value="反选">
<input type="button" id="get" value="获得选中的所有值">
<br>
<input type="checkbox" name="checkbox" value="小牛知识库一">
小牛知识库一
<input type="checkbox" name="checkbox" value="小牛知识库二">
小牛知识库二
<input type="checkbox" name="checkbox" value="小牛知识库三">
小牛知识库三
<input type="checkbox" name="checkbox" value="小牛知识库四">
小牛知识库四
<input type="checkbox" name="checkbox" value="小牛知识库五">
小牛知识库五
<input type="checkbox" name="checkbox" value="小牛知识库六">
小牛知识库六
<input type="checkbox" name="checkbox" value="小牛知识库七">
小牛知识库七
<input type="checkbox" name="checkbox" value="小牛知识库八">
小牛知识库八
</form>
</body>
</html>
以上就是关于checkbox复选框的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍利用Bootstrap实现表格复选框checkbox全选，包括了利用Bootstrap实现表格复选框checkbox全选的使用技巧和注意事项，需要的朋友参考一下 首先来看看实现的效果图： HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： 重点是JS的实现。复选框很小，不容易点到，所以点击每一行也可以选中该行，并用高亮一些CSS样式表示。点击复选框所
-
本文向大家介绍基于JS实现checkbox全选功能实例代码，包括了基于JS实现checkbox全选功能实例代码的使用技巧和注意事项，需要的朋友参考一下 需求：要求实现点击全选选中所有菜单，再次点击全选取消选中。此功能经常会用户，下面小编给大家分享下实现代码，一起看看吧！ 效果图如下： 点击全选之前： 点击全选之后： 再次点击全选之后： 代码如下： 以上所述是小编给大家介绍的基于JS实现checkb
-
介绍 用于在选中和非选中状态之间进行切换。 引入 import { createApp } from 'vue'; import { Checkbox, CheckboxGroup } from 'vant'; const app = createApp(); app.use(Checkbox); app.use(CheckboxGroup); 代码演示 基础用法 通过 v-model 绑定复
-
checkbox常用于多选的情况，比如批量删除、添加群聊等； DOM结构 <div class="mui-input-row mui-checkbox"> <label>checkbox示例</label> <input name="checkbox1" value="Item 1" type="checkbox" checked> </div> 默认checkbox在右侧显示，若希
-
复选框，可设置其状态、传入特殊 class 以及复选框图标位置。 示例 基本用法 <cube-checkbox v-model="checked"> Checkbox </cube-checkbox> 如果选中了，则 checked 的值就为 true。 复选框图标样式 <cube-checkbox v-model="checked" position="right" shape="squa
-
定义 滑动条组件 图片展示 代码演示 import Form from 'pile/dist/components/form' const {Checkbox} = Form <Checkbox defaultChecked = {false} back={(o)=>{console.log(o)}} label="未选中"/> <Checkbox defaultChecked = {true}