首页 > 其他 > 详细

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

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

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

 

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交互

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!