页面全选框使用

发布时间: 2023-08-07 10:16:33

一、直接用JavaScript 代码放到一块可以，input部分放到form 中点击全选不好使，不知为什么

                    <input type="checkbox" id="checkAll" onClick="checkAll()">全选
                    <input type="checkbox" name="fruit" value="apple">苹果
                    <input type="checkbox" name="fruit" value="banana">香蕉
                    <input type="checkbox" name="fruit" value="orange">橙子

                    <script>
                        function checkAll() {
                            var checkboxes = document.getElementsByName("fruit");
                            var checkall = document.getElementById("checkAll");
                            for (var i = 0; i < checkboxes.length; i++) {
                                checkboxes[i].checked = checkall.checked;
                            }
                        }
                    </script>

二jQuery 首先，我们需要在HTML文件中引入jQuery库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后，我们可以通过以下代码实现全选功能：

<input type="checkbox" id="checkAll">全选
<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子

<script>
$(document).ready(function(){
    $("#checkAll").click(function(){
        $("[name=fruit]:checkbox").prop("checked", $(this).prop("checked"));
    });
});
</script>

三、CSS实现全选按钮美化

input[type="checkbox"]#checkAll{
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-appearance: none;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  transition: all 0.3s;
}

input[type="checkbox"]#checkAll:checked::before{
  content: "\2713";
  font-size: 16px;
  position: absolute;
  top: -1px;
  left: 2px;
  color: #5cb85c;
}

input[type="checkbox"]#checkAll:hover{
  background-color: #f0f0f0;
}