复选框全选、单选以及变灰不能选

最新推荐文章于 2023-06-15 17:48:25 发布

谢同学谢童鞋

最新推荐文章于 2023-06-15 17:48:25 发布

阅读量4.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/LuuvyJune/article/details/83781141

版权

这篇博客介绍了如何使用jQuery和HTML创建一个基础的表单，其中包括在表格中添加复选框并实现全选、反选功能。同时，它详细讲解了如何设置部分复选框为禁用状态（灰色不可选），以及全选按钮如何智能地处理这些禁用项。此外，内容还涵盖了单选操作的实现。

摘要由CSDN通过智能技术生成

使用jquery和html做一个基础性的表单效果，记录一下：

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>预约信息管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		
        function detail(id){
		    if($("#"+id).attr('hidden')=='hidden'){
                $("#"+id).fadeIn(1000);
                $("#"+id).removeAttrs("hidden");
			}else{
                $("#"+id).fadeOut(1000);
                $("#"+id).attr("hidden","hidden");
			}
		}

        $(function() {
            // :checkbox表示 获取到表格body的所有checkbox
            var $tbCheckboxes = $("#j_tb").find(":checkbox:not(:disabled)");

            // 全选和全不选
            $("#j_cbAll").click(function () {
                // 使用prop这个方法来 判断 这个checkbox有没有被选中
                var isChecked = $(this).prop("checked");
                //alert(isChecked);
                if (isChecked) {
                    // 让表格body里面的所有checkbox选中
                    // :checkbox 这个选择器会帮我们选择到所有的checkbox
                    $tbCheckboxes.prop("checked", true);
                } else {
                    // 让表格body里面的所有checkbox不选中
                    $tbCheckboxes.prop("checked", false);
                }
            });


            // 单选控制全选checkbox选中或者不选中
            $tbCheckboxes.click(function () {
                // 获取到所有被选中的checkbox的个数跟所有的checkbox个数 对比
                // :checked表示：获取到body中所有被选中的checkbox
                // length属性表示 获取到元素的长度
                var checkedLength = $("#j_tb").find(":checked").length;
                // 获取到所有的checkbox的长度
                var allCheckboxLength = $tbCheckboxes.length;
                //alert(checkedLength);
                // 如果相等，就让全选按钮选中
                if (checkedLength == allCheckboxLength) {
                    $("#j_cbAll").prop("checked", true);
                } else {
                    // 否则，让全选按钮不选中
                    $("#j_cbAll").prop("checked", false);
                }
            });

            $('[type="checkbox"]').click(function () {