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复选框的全部内容，希望对大家的学习有所帮助。
相关推荐
-
js判断复选框是否选中及选中个数的实现代码
用js判断复选框是否选中及选中个数,以前经常有朋友提到复选框的选中问题,这段代码可以帮你解决这个问题,而且它还可以判断你选择了多少个复选框,多选则弹出提示 <HTML> <head> <title>判断复选框是否选中及选中个数</title> <SCRIPT LANGUAGE="JavaScript"> function countChoices(obj) { max = 2; box1 = obj.form.box1.che
-
JS获取复选框的值,并传递到后台的实现方法
给复选框命名:<input type='checkbox' name='checkTheme' value='"> 我在提交的时候onclick="aa();" function aa() { var bb = ""; var temp = ""; var a = document.getElementsByName("checkTheme"); for ( var i = 0; i < a.len
-
javascript动态添加checkbox复选框的方法
本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"
-
js与jQuery实现checkbox复选框全选/全不选的方法
本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大
-
JS实现CheckBox复选框全选、不选或全不选功能
CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec
-
js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/
-
基于javascript实现checkbox复选框实例代码
本文实例讲解了javascript实现checkbox复选框的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascr
-
javascript实现checkbox复选框实例代码
本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse
-
javascript获取checkbox复选框获取选中的选项
有关javascript 获取checkbox复选框的实例数不胜数,下面的这个示例,纯js实现的 var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var message = ""; for (var i = 0, len = opt
-
Java框架学习Struts2复选框实例代码
复选框在Web开发中使用的非常多,现在我们通过struts2的复选框标签来实现一些在开发中经常遇到的问题. 先来看看这个标签的属性: 注:listKey相当于HTML中的value属性,这个值在和后台交互时才真正是我们在后台要使用的:listValue只是内容的显示而已. 案例1 用户选择了喜欢的课程,现在要对已经选择的课程进行修改,跳转到修改界面,然后回显已经勾选的课程. 用户已选课程界面: 点击按钮后进入课程修改界面: 注:在修改界面要对用户最初的选择进行回显. 代码实现!!!! 用户已选课
-
js获取checkbox复选框选中的选项实例
有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var message = ""; for (var i = 0, len = option.leng
-
JS实现CheckBox复选框全选全不选功能
CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo
-
JavaScript 通过Ajax 动态加载CheckBox复选框
废话不多说了,直接给大家贴代码了,具体代码如下所示: <pre name="code" class="html"> <div class="controls" id="compareyear"> </div></pre><br> <img src="http://img.blog.csdn.net/20170830165326131?watermark
-
javascript中DOM复选框选择用法实例
本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选全清和反选</title> &l