码迷,mamicode.com
首页 > 其他好文 > 详细

工作需求----表单多选框checkbox交互

时间:2014-07-22 22:36:14      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   strong   io   

关于多选框,反选及选取几个:

 

1.html内容

<!--begin checkbox-->
      <div class="c_n_manage_tablexx">
            <input type="checkbox" class="c_n_manage_checkbox c_n_manage_check" />
            全选(已选择<span class="a_n_manage_num">0</span>个)
            <input type="button" disabled="disabled" class="c_n_manage_downbox c_n_manage_dis " id="c_n_manage_downmodel"value="批量下架" />
            <input type="button" disabled="disabled" class="c_n_manage_addgroup c_n_manage_dis" value="添加到分组" />
      </div>
 <!--end checkbox-->

<div class="c_n_manage_tablecon">
       <table>
       <tr _id="1">
              <td><input type="checkbox" class="c_n_manage_checkbox"/></td>
       </tr>
    </table>
</div>

 

2.JQ代码交互

//多选框设置
  $doc.on(‘click‘ , ‘.c_n_manage_check‘ , function(){ //全选反选
     var checkeds = $(".c_n_manage_tablecon").find(":checkbox");
     if($(this).attr("checked")){
        checkeds.attr("checked",true); 
        $(".c_n_manage_dis").removeAttr("disabled");
        $(".c_n_manage_dis").css("cursor","pointer");
     }
     else{
        checkeds.attr("checked",false);
        $(".c_n_manage_dis").attr("disabled", true);
        $(".c_n_manage_dis").css("cursor","");
     }
  }).on(‘click‘ , ‘.c_n_manage_tablecon input‘ , function(){ //按钮状态
     if($(this).attr("checked")){
        $(".c_n_manage_dis").removeAttr("disabled");
        $(".c_n_manage_dis").css("cursor","pointer");
     }
     else{
        $(".c_n_manage_dis").attr("disabled", true);
        $(".c_n_manage_dis").css("cursor","");
     }
  }).on(‘click‘ , ‘:checkbox‘ , function(){ //选中几个状态
     $(".a_n_manage_num").html($(".c_n_manage_tablecon").find(":checkbox:checked").length);
  });
   

 

3.展示效果图

bubuko.com,布布扣

工作需求----表单多选框checkbox交互,布布扣,bubuko.com

工作需求----表单多选框checkbox交互

标签:style   blog   color   os   strong   io   

原文地址:http://www.cnblogs.com/ninali/p/3860944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!