前端随手记-js监测checkbox已选中个数并且限制最多选几个

1.前端界面

选中几个checkbox就在下方显示;
记录选中的checkbox个数当达到最大值时,不能在选择checkbox。
在这里插入图片描述

在这里插入图片描述

        <tr>
            <td><%=carriage%></td>
            <td><%=location%></td>
            <td><input type="checkbox" value="" name="checkboxName" class="checkboxStyle"></td>
        </tr>
<p>选座喽!已选座<span class="count">0</span>/<%=users.size()%></p>

js逻辑

//    得到选中的checkbox个数
//点击完成时显示已选个数
$(".checkboxStyle").click(function(){
    
    

    var chk=$(".checkboxStyle");
    var len = chk.filter(":checked").length;
    if(len><%=users.size()%>){
    
    
            if($(this).prop('checked')) {
    
    
                return false;
            }
    }else{
    
    
            $(".count").html(len);
    }

})

猜你喜欢

转载自blog.csdn.net/joey_ro/article/details/108736682