本文简单的实现了点击多选按钮,选中name相同的checkbox;再次点击,则取消name相同的checkbox

prop用法

效果如下:
多选

一、引入jquery

  <script src="http://code.jquery.com/jquery-latest.js"></script>

二、设计table
重点关注checkbox的id和name

 <table id="c">
   <tbody>
    <tr>
     <th>
        <input type="checkbox" id="check_all" name="check_all" onclick="checkAll(this)"/>
        点击这里触发多选函数
     </th>
    </tr>
    <tr id="1">
     <td> <input type="checkbox" name="check_handle" value="1" />复选框1</td>
    </tr>
    <tr id="2">
     <td> <input type="checkbox" name="check_handle" value="2" />复选框2</td>
    </tr>
    <tr id="3">
     <td> <input type="checkbox" name="check_handle" value="3" />复选框3</td>
    </tr>
   </tbody>
  </table>

三、JavaScript实现功能

         function checkAll() {
            var tableid = $("#c");
            var checkall = $("#check_all");
            if(checkall.prop("checked")){
            //全选
            tableid.find("input[name=check_handle]").each(function(){
                 $(this).prop("checked",true);
            });
            checkall.prop("checked",true);
           }else{
            //取消全选
            tableid.find("input[name=check_handle]").each(function(){
                 $(this).prop("checked",false);
            });
             checkall.prop("checked",false);
           }
        }

说明:1、需要引入jquery
2、本文只是简单实现题首所说功能,并未实现其他功能;
3、其他功能以后再补充

标签: jQuery, checkbox, check

添加新评论