checked多选,取消,反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" ondblclick="ChooseAll();">
        <input type="button" value="取消" ondblclick="CancelAll();">
        <input type="button" value="反选" ondblclick="TrunAll();">
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="c1">
                <tr >
                    <td ><input class="i1" type="checkbox"/></td>
                    <td>alex</td>
                    <td>18</td>
                </tr>
                 <tr>
                    <td  ><input class="i1" type="checkbox"/></td>
                    <td>alex</td>
                    <td>18</td>
                </tr>
                 <tr >
                    <td ><input class="i1" type="checkbox"/></td>
                    <td>alex</td>
                    <td>18</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        function ChooseAll() {
            var td= document.getElementById(‘c1‘);
            var doc = td.getElementsByClassName(‘i1‘);
            for(var i=0;i<doc.length;i++){
                var current = doc[i];
                current.checked = true;
            }
        }
        function CancelAll() {
            var td= document.getElementById(‘c1‘);
            var doc = td.getElementsByClassName(‘i1‘);
            for(var i=0;i<doc.length;i++) {
                var current = doc[i];
                current.checked = false;
            }
        }
        function TrunAll() {
            var td= document.getElementById(‘c1‘);
            var doc = td.getElementsByClassName(‘i1‘);
            for(var i=0;i<doc.length;i++) {
                var current = doc[i];
                if (current.checked){
                    current.checked = false;
                }else {
                    current.checked = true;
                }
            }
        }
    </script>
</body>
</html>
时间: 2024-11-07 20:29:31

checked多选,取消,反选的相关文章

使用jQuery练习全选-取消-反选-显示选择内容等功能代码

<span style="font-size:24px;color:#ff0000;">部长练习全选-取消-反选-显示选择内容等功能代码:</span> <!doctype html> <html> <head> <meta charset="gb2312"> <title>部长练习全选-取消-反选-显示选择内容等功能</title> <script src=&qu

用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1 { 8 position: fixed; 9 top: 0; 10 right: 0; 11 left: 0; 12 bottom: 0; 13 background

JavaScrip 全选/取消/反选

该功能实现复选框的全选.取消.反选 上述例子,先通过id,找到对应的tbody标签,然后,逐级向下寻找,直到找到对应的checkbox. 通过对checkbox的属性checked 来判断,是否被勾选选中. 原文地址:https://www.cnblogs.com/wulafuer/p/11101790.html

CMDB项目CURD组件之全选取消反选和编辑模式

$(':checked') 选中的所有元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css

jquery实现全选,取消,反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>复选多选反选</title> <meta charset="UTF-8"> <script src="jquery-3

JavaScript内容梳理 示例之模态对话框 示例之全选和反选以及取消 示例之后台管理左侧菜单

1 <!DOCTYPE html> 2 <!--示例之模态对话框--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide{ 9 display: none; 10 } 11 .c1{ 12 position: fixed; 13 lef

PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能

摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. 在这里分享一下我们基础班学员遇到的一些疑点和我的分析.PS:分析不一定正确,希望同行指教 前一段时间笔者重感冒了,身体不舒服,还请了一天假没去上实操课,播客也没有来得及和大家分享.今天感冒已经好得差不多啦,就剩下一点留鼻涕喉咙痒而已,刚好今天是休息天不用上课,这里打铁趁热,赶紧给大家分享一下昨天学到的用JQ实

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

JS如何实现对name是数组的复选框的全选和反选以及取消选择

JS如何实现对name是数组的复选框的全选和反选以及取消选择? form内容如下: 因为PHP接收要用 数组形式的 复选框,正常情况下 JQ可如果是这种 直接使用 $("input[name=ptpt])即可.但是这种php接收的只是最后一个值,字符串.<label><input type='checkbox' name='ptpt' value='a1' />a1</label><label><input type='checkbox' n