javascript中checkbox使用方法实例演示

本文实例讲述了JavaScript实现的伸展收缩型菜单代码。分享给大家供大家参考。具体如下：
运行效果截图如下：

（1）全选

（2）部分选

（3）反选（全不选）

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table中的CheckBox</title>
<script type="text/javascript" src="script/jquery-1.10.1.js"></script>
<style type="text/css">
  body
  {
   width:100%;
   height:100%;
   font-size:12px;
  }
  table
  {
   width:80%;
   height:100%;
  }
  .tr_odd
  {
   background: #EBF2FE;
  }
  .tr_even
  {
   background: #B4CDE6;
  }
  .tab_body
  {
   text-align: center;
  }
</style>
<script type="text/javascript">
  $(function(){
    $("tr:odd").addClass("tr_odd");//奇数行背景色
    $("tr:even").addClass("tr_even");//偶数行背景色 

    $("#ckb_head").click(function(){
      if($(this).prop("checked")){//全选
        $("input[name='ckb']").attr("checked","true");
      }else{//全不选
        $("input[name='ckb']").removeAttr("checked");
      }
    });
  }); 

  //部分选
  function ckbSome(){
    var flag = true;
    var selectedCkb = document.getElementsByName("ckb");
    for(var i=0;i<selectedCkb.length;i++){
      if(selectedCkb[i].checked == false){
        flag = false;
      }
      if(flag){
        document.getElementsByName("check_box")[0].checked=true;
      }else{
        document.getElementsByName("check_box")[0].checked=false;
      }
    }
  }
</script>
</head>
<body>
  <table>
   <tr style="background: #CCCCCC;text-align: center;">
    <th><input type="checkbox" id="ckb_head" name="check_box"/></th>
    <th>学号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060101</td>
    <td>张华</td>
    <td>23</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060102</td>
    <td>赵雪</td>
    <td>24</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060103</td>
    <td>孙旭</td>
    <td>21</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060104</td>
    <td>李姝</td>
    <td>20</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060105</td>
    <td>公孙旭</td>
    <td>22</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060106</td>
    <td>李枝花</td>
    <td>24</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060107</td>
    <td>魏征</td>
    <td>22</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060108</td>
    <td>施礼</td>
    <td>20</td>
    <td>女</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060109</td>
    <td>王志</td>
    <td>23</td>
    <td>男</td>
   </tr>
   <tr class="tab_body">
    <td><input type="checkbox" name="ckb" onclick="ckbSome()"/></td>
    <td>2013060104</td>
    <td>方小许</td>
    <td>20</td>
    <td>女</td>
   </tr>
  </table>
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

赞 (0)

相关推荐

  • javascript中checkbox使用方法简单实例演示

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

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

  • javascript实现checkbox复选框实例代码

    本文实例介绍了javascript实现checkbox复选框实例代码以及对checkbox复选框进行美化操作,分享给大家供大家参考,具体内容如下 1.checkbox复选框进行美化操作 复选框默认外表的美观度差强人意,能够满足美观度要求不高的页面,但是如果对于页面要求较为精致,那可能就过于勉强了,下面就一段对复选框进行美化的代码实例,希望能够给大家带来一定的帮助. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charse

  • js与jQuery实现checkbox复选框全选/全不选的方法

    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法.分享给大家供大家参考,具体如下: 先来看看JavaScript实现checkbox复选框全选/全不选的方法.这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现. 我们先把那些带复选框的列表弄好,还没加全选.全不选时候的状态,大

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • JS实现CheckBox复选框全选、不选或全不选功能

    CheckBox控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBox复选框JS实现全选.不选.全不选功能,很简单,具体内容如下 思路: 1.获取元素 2.给全选 不选 反选添加点击事件 3.用for循环checkbox 4.把chec

  • javascript动态添加checkbox复选框的方法

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

  • 基于javascript实现checkbox复选框实例代码

    基于javascript实现checkbox复选框实例代码

    本文实例讲解了javascript实现checkbox复选框的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascr

  • js获取所有checkbox的值的简单实例

    例: <input type="checkbox" name="test" value="值1" />显示的内容 <input type="checkbox" name="test" value="值2" />显示的内容 <input type="checkbox" name="test" value="值3

  • javascript中checkbox使用方法实例演示

    javascript中checkbox使用方法实例演示

    本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: (1)全选 (2)部分选 (3)反选(全不选) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ht

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中innerHTML使用方法实例

    JavaScript中innerHTML使用方法实例

    目录 innerHTML innerHTML的写法 总结 innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法 innerHTML的写法 对于element,设置innerHTML指定的元素名称 element.innerHTML; 将指定元素的html代码分配给变量 var sample1 = element.innerHTML 用指定元素替换变量的值 通过如下编写,可以在删

  • JavaScript中的类与实例实现方法

    本文实例讲述了JavaScript中的类与实例实现方法.分享给大家供大家参考.具体如下: JavaScript 中没有父类, 子类的概念, 也没有class 和 instance 的概念, 全靠 prototype chain来实现继承. 当查找一个对象的属性时, JavaScript 会向上遍历 prototype chain, 直到找到对应的属性为止. 有几种方法, 可以使得 JavaScript 模拟出 class 和 instance 的概念. 1. 直接使用构造函数来创建对象, 在构造

  • javaScript中push函数用法实例分析

    本文实例讲述了javaScript中push函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 push 方法,将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1   [item2   [.   .   .   [itemN   ]]]]) 参数 arrayObj,必选项.一个   Array   对象. item,   item2,.   .   .   itemN, 可选项.该   Array   的新元素. 说明 push 

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • jQuery中ajax - get() 方法实例详解

    jQuery中ajax - get() 方法实例详解

    在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

  • Javascript中的call()方法介绍

    在Mozilla的官网中对于call()的介绍是: 复制代码 代码如下: call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. Call() 语法 复制代码 代码如下: fun.call(thisArg[, arg1[, arg2[, ...]]]) Call() 参数 thisArg 复制代码 代码如下: 在fun函数运行时指定的this值.需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nul

  • JavaScript中this函数使用实例解析

    这篇文章主要介绍了JavaScript中this函数使用实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 普通函数 普通函数中的this,普通函数中的this表示调用此函数时的对象,如下例: var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 //调用say函数的是对象obj,所以this指代对象o

随机推荐