js全选

xiaoxiao2021-02-28  140

思路:

点击全选时,全选框与所有复选框的状态相同 点击单个复选框时,当所有的复选款状态相同时,全选框的状态也相同

1.checkbox内容

<div id="formdiv"> <input type="checkbox" name="checkoption">篮球<p> <input type="checkbox" name="checkoption">足球<p> <input type="checkbox" name="checkoption">网球<p> <input type="checkbox" name="checkoption">台球<p> <input type="checkbox" id="selectAll"> <label for="selectAll">全选</label> </div> 2.定义js

<script type="text/javascript"> /* 全选 */ $(document).ready(function(){ $("#selectAll").click(function(){ //获取全选的状态 var state = $("#selectAll").prop("checked"); //同步 $("input[name='checkoption']").prop("checked",state); }); //复选框 $(":checkbox[name='checkoption']").click(function(){ /* 所有的复选框 */ //var all = $(":checkbox[name='checkoption']").length; var all = $("input[name='checkoption']").length; /* 选中的复选框 */ var option = $("input[name='checkoption']:checked").length; if (all == option) { $("#selectAll").prop("checked",true); }else{ $("#selectAll").prop("checked",false); } }); }); </script>

转载请注明原文地址: https://www.6miu.com/read-36196.html

最新回复(0)