javascript实现checkbox复选框实例代码_javascript技巧

本文实例介绍了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
, checkbox
复选框
checkbox复选框样式、checkbox复选框、checkbox 单选复选框、美化复选框checkbox、checkbox 复选框取值,以便于您获取更多的相关知识。

时间: 2016-01-10

javascript实现checkbox复选框实例代码_javascript技巧的相关文章

javascript动态添加checkbox复选框的方法_javascript技巧

本文实例为大家介绍了javascript如何动态添加checkbox复选框: 在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果. 单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id"

基于JS实现checkbox全选功能实例代码_javascript技巧

需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

javascript获取checkbox复选框获取选中的选项_javascript技巧

有关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

javascript实现复选框选中属性_javascript技巧

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解. 如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句.有很多种方法来判断一个复选框是否选中. 让我们先来看看原生的javascr

javascript中checkbox使用方法简单实例演示_javascript技巧

演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格.1.首先显示出相应的界面:   相关代码: <body> 商品列表:<br/> 笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 台式机<input type="checkbox&

纯JavaScript 实现flappy bird小游戏实例代码_javascript技巧

前言: <flappy bird>是一款由来自越南的独立游戏开发者Dong Nguyen所开发的作品,游戏于2013年5月24日上线,并在2014年2月突然暴红.2014年2月,<Flappy Bird>被开发者本人从苹果及谷歌应用商店撤下.2014年8月份正式回归APP STORE,正式加入Flappy迷们期待已久的多人对战模式.游戏中玩家必须控制一只小鸟,跨越由各种不同长度水管所组成的障碍. 正文: 接下来就是一步一步来实现它 步骤1:页面布局,这儿就不多说了,页面内容如下:

Javascript简单实现面向对象编程继承实例代码_javascript技巧

本文讲述了Javascript简单实现面向对象编程继承实例代码.分享给大家供大家参考,具体如下: 面向对象的语言必须具备四个基本特征: 1.封装能力(即允许将基本数据类型的变量或函数放到一个类里,形成类的成员或方法) 2.聚合能力(即允许类里面再包含类,这样可以应付足够复杂的设计) 3.支持继承(父类可以派生出子类,子类拥有父母的属性或方法) 4.支持多态(允许同样的方法名,根据方法签名[即函数的参数]不同,有各自独立的处理方法) 这四个基本属性,javascript都可以支持,所以javasc

JavaScript页面实时显示当前时间实例代码_javascript技巧

前言 这次认认真真又重新看了相关内容,现把需要注意的地方总结如下: 1.通过getDay()得到的星期数是从0开始,0表示星期天,之后从1~6依次表示星期一到星期六: 2.得到日期需使用getDate()而不是getDay() ,因为可能习惯性地认为日期就是天数,可能会使用getDay() ,但其实getDay()是用于得到星期数的: 3.通过getMonth()得到月份,从0开始计数,所以需要再加1. 实例代码如下: <html> <head> <title><

jsp+javascript打造级连菜单的实例代码_javascript技巧

  复制代码 代码如下:   <%@ page import="java.util.Date,yava.fileapp.*,java.sql.*;"         contentType="text/html;charset=GB2312" pageEncoding="GB2312"  %>  <style>  .f9{ font-size:9pt; }  .bgc{ background-color:#AECAF9;