jquery table下的复选框选中、取消

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../../../css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="../../../js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../../../js/bootstrap.min.js"></script>
<script language="javascript">
$().ready(function() {
    $("input[id=all]").click(function(){
        var allchecked = this.checked;
        var arr = $(this).parent().parent().parent().find("input");
        for(var i = 1;i<arr.length;i++){
            arr[i].checked = allchecked;
        }
    });
    
    $("input[id=inlineCheckbox1]").click(function(){
        var arr = $(this).parent().parent().parent().find("input");
        for(var i = 1;i<arr.length;i++){
            if(arr[i].checked){
                arr[0].checked = true;    
                return;
            }
        }
        
        var arr2 = $(this).parent().parent().parent().find("input[checked=true]");
        if(arr2.length ==0){
        arr[0].checked = false;    
        }
    
        
    })
    
    
});
</script>
</head>
<body>
  <table  class="table">
      <tr>
        <th>一级菜单</th>
        <th>二级菜单</th>
    </tr>
    <tr>
<td>
<label class="checkbox-inline">
  <input type="checkbox"  id="all" value="option1"> 系统管理
</label>
</td>
        <td>
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1"  value="option1"> 用户管理
        </label>
             <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>     <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>     <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>
        </td>
    </tr>   <tr>
<td>
<label class="checkbox-inline">
  <input type="checkbox" id="all" value="option1"> 系统管理
</label>
</td>
        <td>
        <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>
             <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>     <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>     <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> 用户管理
        </label>
        </td>
    </tr>
  </table>
</body>
</html>
时间: 2024-10-09 21:46:17

jquery table下的复选框选中、取消的相关文章

jQuery实现checkbox(复选框)选中、全选反选代码

谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked 所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr

JS下拉复选框的实现

<html>   <head>     <script src="jquery-1.7.2.min.js"></script>     <script src="jquery.easyui.min.js" ></script>     <link   rel="stylesheet" href="css/themes/metro/easyui.css"

jQuery+SpringMVC中的复选框选择与传值

一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked");$("#cb1").attr("checked",true); 对应的jQuery函数,主要完成三个功能: 1.第一个复选框选中或取消选中,则下面的复选框为全选或取消全选: 2.当下面的复选框全部选中时,则将第一个复选框设置为选中,当下面的复选框中有一个没

jQuery应用操作之---复选框

1.示例1: <form> 你最爱好的运动是? <input type="checkbox" id="CheckedAll"/>全选<br/> <input type="checkbox" id="CheckedNo"/>全不选<br/> <input type="checkbox" id="CheckedRev"/>

Web前端之复选框选中属性

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了.今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解.翻译的目的一是分享给大家,二是方便自己查阅.原文链接是:http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.

jQuery实现的checkbox复选框全选和全不选效果

jQuery实现的checkbox复选框全选和全不选效果:复选框的全选和全不选效果在代码中非常的常用,尤其在批量处理的需求中更是如此,下面就通过一个代码实例简单介绍一下如何实现此效果,希望能够对需要的朋友有所帮助,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http:

自定义实现 PyQt5 下拉复选框 ComboCheckBox

一.前言 由于最近的项目需要具有复选功能,但过多的复选框会影响界面布局和美观,因而想到把 PyQt5 的下拉列表和复选框结合起来,但在 PyQt5 中并没有这样的组件供我们使用,所以想要自己实现一个下拉复选框,主要就是继承 QComboBox 类,然后将复选框 QCheckBox 加入其中,并实现相应的功能. 最终实现的下拉复选框效果如下: 二.代码实现 1.主要方法 在 PyQt5 中,有几个主要的方法需要了解一下,方法名称和对应的含义如下: QtWidgets.QComboBox.setVi

C# Word中插入复选框选中符号

object fontname = "Wingdings 2";  object uic = true;    doc.Bookmarks.get_Item(ref lblmark).Range.InsertSymbol(-4014, ref fontname, ref uic, ref missing); C# Word中插入复选框选中符号,布布扣,bubuko.com

js 设置多个复选框选中和取消选中

// 设置选中 function setCheckboxClick(obj) { if(obj == null) { $.messager.alert('警告', "请选择要设置选中的项!",'warning'); } // alert(obj.value); var authorityId = obj.value; $.ajax({ type: 'post', url: 'getAuthorityByAuthorityId.action', data: {"authorit