zoukankan      html  css  js  c++  java
  • checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!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>Insert title here</title>
    <script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
    <script>
    /* 第一种方法
    function selectAll() {

    if ($("#select-all").is(":checked")) {

    $("[name='selected']").prop("checked", true);
    } else {

    $("[name='selected']").prop("checked", false);
    }

    } */

    /*
    *
    第二种方法
    */
    function selectAll() {

    if ($("#select-all").is(":checked")) {//判断一个checkbox多选框是否选中

    $("input:checkbox[name='selected']").prop("checked", "checked");

    var allValue = queryCheckedValue();
    alert(allValue);

    } else {

    $("input:checkbox[name='selected']").prop("checked", "");
    var str = noCheckedValue();
    alert(str);

    }

    }

    //获取所有选中checkbox的值

    function queryCheckedValue() {

    var str = "";

    $("input:checkbox[name='selected']:checked").each(function(i) {

    var val = $(this).val();
    str = str + val + "-";

    });

    return str;

    }

    //所有的name为‘selected’的checkbox的值
    function noCheckedValue() {

    var str = "";
    $("input:checkbox[name='selected']").each(function(i) {

    var val = $(this).val();
    str = str + "-" + val;
    });
    return str;
    }

    //判断所有的子checkbox全部选中时,总checkbox选中,否则,反之;
    function oneToAll() {

    var allChecked = 0;//所有选中checkbox的数量

    var all = 0;//所有checkbox的数量

    $("input:checkbox[name='selected']").each(function(i) {
    all++;
    if ($(this).is(":checked")) {
    allChecked++;
    }

    });

    if(allChecked==all){//相等时,则所有的checkbox都选中了,否则,反之;

    $("#select-all").prop("checked",true);

    }else{

    $("#select-all").prop("checked",false);

    }

    }
    </script>
    </head>
    <body>

    <table>

    <tr>
    <td><input type="checkbox" id="select-all"
    onclick="selectAll();" /></td>
    <td>全选的checkbox</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="selected" value="1" onclick="oneToAll();"/></td>
    <td>1</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="selected" value="2" onclick="oneToAll();"/></td>
    <td>2</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="selected" value="3" onclick="oneToAll();"/></td>
    <td>3</td>
    </tr>
    <tr>
    <td><input type="checkbox" name="selected" value="4" onclick="oneToAll();"/></td>
    <td>4</td>
    </tr>
    </tr>
    <tr>
    <td><input type="checkbox" name="selected" value="5" onclick="oneToAll();"/></td>
    <td>5</td>
    </tr>
    </table>

    </body>
    </html>

  • 相关阅读:
    按行打印二叉树结点值
    Kafka消息队列(继续深挖)
    【Java IO模式】Java BIO NIO AIO总结
    JAVA线程池的执行过程
    CentOS7升级版本
    【转】KVM中打开virt-manager报错或者将其显示为中文界面的办法
    【转】linux kvm虚拟机配置及常见问题处理
    【转】关于Quartus ii无法识别Modelsim路径的问题
    【转】[git]error: pack-objects died of signal
    storm kafka整合
  • 原文地址:https://www.cnblogs.com/git-niu/p/6773133.html
Copyright © 2011-2022 走看看