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 相关文章推荐
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
php新建文件自动编号的思路与实现
2011/06/27 PHP
php汉字转拼音的示例
2014/02/27 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python 回溯法模板详解
2020/02/26 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
实习教师自我鉴定
2013/09/27 职场文书
运动会广播稿80字
2014/01/23 职场文书
师恩难忘教学反思
2014/04/27 职场文书
2014年新教师工作总结
2014/11/08 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript