JS对checkbox全选和取消全选

需求:checkbox控制列表数据全选与取消全选择。

效果图:

1、html

<body >
          <input type="button" name="inputfile" id="inputfile" value="点击导入" onclick="open();"/>
          <input type="file" id="File1" name="File1" style="display:none;">
        <input type="button" name="outbtn" value="导出"/>

    <table border="1">
        <!-- <tr>
    <a href="javascript:;" class="a-upload"> </a>
            </tr>-->
        <tr>
            <td><input  id="all" type="checkbox" name="yon" onclick="chk()"/></td>
            <td>ID</td>
            <td>地区</td>
        </tr>
        <c:forEach items="${dislist }" var="dis">
            <tr>
            <td><input id="mychk" type="checkbox" name="mychk"/></td>
            <td>${dis.id }</td>
            <td>${dis.name }</td>

        </tr>
     </c:forEach>

    </table>

  </body>

2、js

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript">
        /* $("#all").click(function(){
            alert("11111111");
            if(this.checked){
                alert("2222");
                $("mychk").prop("checked",true);
            }else{
                $("mychk").prop("checked",false);
            }

        }); */
        function chk(){
            var all = document.getElementById("all");
            var mychk = document.getElementsByName("mychk");
            alert("mychk长度=="+mychk.length);
            if(all.checked==true){
                alert("all.checked==true全选");
                if(mychk.length){
                    for(var i=0;i<mychk.length;i++){
                        mychk[i].checked = true;
                    }

                }
                mychk.chcked=true;
            }else{
                alert("all.checked==false全不选");
                if(mychk.length){
                    for(var i=0;i<mychk.length;i++){
                        mychk[i].checked = false;
                    }

                }
            }

        }
    </script>
时间: 2024-10-06 04:44:27

JS对checkbox全选和取消全选的相关文章

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

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

datagridview里面的checkbox全选和取消全选

全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridview中的每一行,判断是否选中,若为选中,则选中 for (int i = 0; i < dataGridView1.Rows.Count; i++) { if ((Convert.ToBoolean(dataGridView1.Rows[i].Cells[0].Value) == false))

在项目中学习.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

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

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

使用AngularJS实现简单:全选和取消全选功能

<!DOCTYPE html><html lang="en" ng-app="myModule5"><!--3.ng-app="myModule5"启动ng并调用模块--><head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.css"

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

JavaScript全选和取消全选

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

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

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