Jquery - checked 全选与取消全选

html:

<!DOCTYPE html>
<html>
<head>
    <title>节点列表</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/Public.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/node.css">
    <script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Js/node.js"></script>
</head>
<body>
    <div id="wrap">
        <div>
            <a href="<{:U(‘/Admin/Rbac/role‘)}>" class="add-app">返回</a>
        </div>
        <div>
            <foreach name="node" item="app">
                <div class="app">
                    <p>
                        <strong><{$app.title}></strong>
                        <input type="checkbox" name="access[]"  value="<{$app.id}>_1" level=‘1‘ />
                    </p>

                    <foreach name="app.child" item="action">
                        <dl>
                            <dt>
                                <strong><{$action.title}></strong>
                                <input type="checkbox" name="access[]" value="<{$action.id}>_3" level=‘2‘  />
                            </dt>

                            <foreach name="action.child" item="func">
                                <dd>
                                    <span><{$func.title}></span>
                                    <input type="checkbox" name="access[]" value="<{$func.id}>_3" level=‘3‘  />
                                </dd>
                            </foreach>
                        </dl>
                    </foreach>
                </div>
            </foreach>
        </div>
    </div>
</body>
</html>

JS:

$(document).ready(function(){
    $(‘input[level="1"]‘).click(function() {
        var inputs = $(this).parents(‘.app‘).find(‘input‘);
        $(this).prop(‘checked‘) ? inputs.prop(‘checked‘, true) : inputs.removeAttr(‘checked‘, false);
    });

    $(‘input[level="2"]‘).click(function() {
        var inputs = $(this).parents(‘dl‘).find(‘input‘);
        $(this).prop(‘checked‘) ? inputs.prop(‘checked‘, true) : inputs.removeAttr(‘checked‘, false);
    });
});
时间: 2024-11-16 19:21:59

Jquery - checked 全选与取消全选的相关文章

jQuery --checkbox全选和取消全选简洁高效的解决办法

最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二. html代码如下: <fieldset data-role="controlgroup">  <label><input type="checkbox" name="boxes" id="select_al

在项目中学习.NET的JQuery CheckBox方法(全选、取消全选、其他)

一.在项目中遇到的CheckBox的全选和取消全选以及其他等解决方案如下: // 对全选和取消全选的事件 $("#CheckAll").click(function () {                var checkedOfAll = $(this).prop("checked");                if (checkedOfAll == true) {                    $("input[id*='check']

实现全选和取消全选

点击“全选老大”实现全选,再次点击取消全选,以此类推. html代码是不变的: <div id="mycheckbox"> <input type="checkbox" id="selectAll"><br> <input type="checkbox"><br> <input type="checkbox"><br> &l

JavaScript全选和取消全选

<html> <head> <title>全选和取消全选</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script language="javascript"> function checkAllorcancelAll(){ //思路:1.获取checkbox的选中状

如何实现复选框的全选和取消全选效果

如何实现复选框的全选和取消全选效果:在很多网站都有这样的功能,当点击一个全选按钮之后,所有的复选框都会被选中,再点击之后会取消全选,功能非常的人性化,可以省却很多人力,下面就简单介绍一下JS如何实现此功能,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

GridView中实现全选与取消全选,以便同时删除多条数据

我们项目后台操作中不可避免的会有同时删除多项的操作,本文实现的就是当点击全选时,选定当前页中所有项,当取消了某一项的选定,则“全选”CheckBox的checked也为false:然后在后台中取到所选定的项的ID,实现同时删除多项的功能. 前台代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> 1 <%@ Page Language="

JS对checkbox全选和取消全选

需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/> <input type="file" id="File1" name=&q

vue实现全选和取消全选

很简单使用的vue全选和取消全选 直接上代码,简单易懂不懂得可以留言. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

react实现全选、取消全选和个别选择

react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo extends React.Component{ constructor(props,context){ super(props,context); this.state = { checklist:[ {name:'全选',checked:false}, {name:'张三',checked:fal

Axure 7.0实现复选框全选和取消全选

使用Axure原型工具对产品进行设计,使用复选框来实现全选中和全取消效果,也可以利用按钮或文字做为开关来控制效果,下面主要介绍使用复选框来实现全选中和全取消效果. 1/1 首先输入复选框效果的文字,并为每个复选框建立名称,方便后期对其辨认,例如:选择你最喜欢居住的城市,建立一个全选的复选框进行全选or取消全选效果 1/2 设置全选中 1/2/1 选择全选复选框,双击(选中状态改变时),打开新增用例对话框 1/2/2  设置用例名称,设置条件判断为真 1/2/3 选择(选中),勾选需要被选中的复选