jsp页面checkbox全选与单选并显示已选中数量

checkbox全选与单选

第一步，设置checkbox标签

<center>
    <table>
        <tr><td>已选中【<span id="number">span>】个td><td>td>tr>
        <tr><td><input type="checkbox" id="check_all" onchange="check_all();"/>td><td>全选td>tr>
        <tr><td><input type="checkbox" name="check" onchange="num()"/>td><td>西瓜td>tr>
        <tr><td><input type="checkbox" name="check" onchange="num()"/>td><td>苹果td>tr>
        <tr><td><input type="checkbox" name="check" onchange="num()"/>td><td>香蕉td>tr>
        <tr><td><input type="checkbox" name="check" onchange="num()"/>td><td>橙子td>tr>
        <tr><td><input type="checkbox" name="check" onchange="num()"/>td><td>凤梨td>tr>
    table>
center>

第二步，写方法

  <%--全选--%>
  <script type="text/javascript">
    function check_all() {
    	//根据id找到元素，获取选择状态
      var status =  document.getElementById("check_all").checked;
        var mycc = document.getElementsByName("check");
        //遍历集合，改变每个checkbox状态随着全选按钮的状态儿改变
        for (a=0;a<mycc.length;a++){
            mycc[a].checked=status;
        }
        num();
    }
    <%--计数--%>
    function num() {
        //统计被选中数量
        var checknum=0;
        var myck= document.getElementsByName("check");
        for (a=0;a<myck.length;a++){
            if (myck[a].checked){
                checknum++;
            }
        }
        //如何将num这个值放在页面中
        $("#number").html(checknum);

        //完善自动全选按钮，当底下按钮全部选中，则全选按钮自动勾选
        if(checknum==myck.length){
            document.getElementById("c0").checked=true;
        }else {
            document.getElementById("c0").checked=false;
        }
    }
  script>

效果