javascript实现checkbox复选框实例代码


Posted in Javascript onJanuary 10, 2016

本文实例介绍了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复选框的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 #Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 #Javascript
理解Angular数据双向绑定
Jan 10 #Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 #Javascript
JavaScript电子时钟倒计时第二款
Jan 10 #Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 #Javascript
Node.js静态文件服务器改进版
Jan 10 #Javascript
You might like
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
浅谈Python基础—判断和循环
2019/03/22 Python
详解Python 最短匹配模式
2020/07/29 Python
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
单位介绍信范文
2014/01/18 职场文书
教师旷工检讨书
2014/01/18 职场文书
创先争优活动方案
2014/02/12 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
优秀家长事迹材料
2014/05/17 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书