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

最新推荐文章于 2023-11-27 15:13:50 发布
最新推荐文章于 2023-11-27 15:13:50 发布
阅读量4.6k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuuvyJune/article/details/83781141
版权
使用jquery和html做一个基础性的表单效果，记录一下：<%@ page contentType="text/html;charset=UTF-8" %><%@ include file="/WEB-INF/views/include/taglib.jsp"%><html><head> <title>预约信息管理
摘要由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 () {
最低0.47元/天 解锁文章
谢同学谢童鞋
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT QComboBox（2）设定某项不可被选中以及修改背景颜色
光顶术士的博客
07-11 3672
QT编程 QComboBox设定某项不可被选中以及修改背景颜色 1.比较简单，但是搜索很久才查出来 1.直接看代码：设置禁用，并且背景颜色变成灰色 QVariant v0(0); //不可选中 QVariant v1(-1); //接触不可选中 ui->comboBox_ELD_1->setItemData(0,v0,Qt::UserRole-1); //设定下标0不可选中 ui->comboBox_ELD_1->setItemData(0
选择指定数量后checkbox不可选(变灰)javascript代码
10-29
选择指定数量后checkbox不可选(变灰)javascript代码
checkbox 选中框置灰_如何使Checkbox变灰不可用,并切点击Checkbox可使其全选,取消全选...
weixin_33595380的博客
01-11 2297
实现点击状态栏报警提示后，报警铃声和报警震动都变为灰色并且不可点击代码如下：// 控件事件处理btnClick(btnTip);btnClick(btnSound);btnClick(btnVibrate);private void btnClick(SwitchButton button) {button.setOnCheckedChangeListener(new OnCheckedChan...
jquery 设置按钮变成灰色和不可用
热门推荐
信徒博客
04-14 2万+
需求说明 最近在做一个需求，管理员审核资料，点击审核按钮，这个按钮只能被触发一次，而且点击一次以后，会变成灰色的！ html代码 我的id 和方法参数都是动态绑定的 <button id="${audit.lid}" onclick="getpass(${audit.lid})" style="background-color:#8ac007;color:white">通过&...
element ui表格勾选后勾选框置灰，不可再勾选
m0_51501174的博客
09-01 2898
首先在type="selection"的表格列里写上方法:selectable="checkSelectable" <el-table-column type="selection" :selectable="checkSelectable" /> checkSelectable方法中写 checkSelectable(row){ if(this.tDangerPurchaseDetailsList.length>0){//判断容器表里是否...
checkbox 选中框置灰_JS实现点击复选框将按钮或文本框变为灰色不可用的方法
weixin_33410492的博客
02-23 2503
导读热词本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法。分享给大家供大家参考。具体如下：在注册时候经常会看不到，如果不点击阅读注册许可的话，提交按钮是灰色的，失效不能提交，必须点它一下，这个JS代码就是实现这样一个功能，只有你点击了确认提交，下边的按钮才生效。运行效果如下图所示：具体代码如下：点击复选框按钮变为不可用var checkobjfunction agreesubmi...
多选框全选，不选，反选
weixin_57130691的博客
03-18 411
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" class="xuanze"/> <input type="checkbox" class="xuanze"/> <input ...
layui复选框的全选与取消实现方法
10-16
在给出的示例中，可以看到有两个级别的复选框：一级复选框（全选/取消）和二级复选框（具体选项）。一级复选框用于控制所有二级复选框的状态，而二级复选框则代表具体的权限选项。 ```html 客户管理 客户...
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
10-26
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法
jsp 使内容变成灰色 不可编辑
mobingdetong的专栏
06-12 6834
var objs=readOnlyTable.getElementsByTagName("INPUT"); var objs1=readOnlyTable.getElementsByTagName("textarea"); for(var i=0;i { objs[i].disabled=true; } for(var i=0;i { objs1[i].disabled=true;
未选中的 HTML 复选框
很酷的站长的博客
12-13 397
在本教程中，我们将学习发布未选中的 HTML 复选框。要与用户互动，有必要通过网站获取他们的输入或数据。HTML 表单用于从用户那里获取输入。表单对于在网站上获取用户的数据至关重要。这些表单从用户那里获取输入，并使用HTTP请求将数据发送到服务器。有两种类型的HTTP请求，一种是GET，另一种是POST。POST 请求是最常用的类型，因为它是安全的并且可以发送大量数据。但这两种方法都会发送值已更改或编辑的数据。因此，未编辑的值或未选中的复选框不会发送到服务器。
Qcombox与QlineEdit默认文本字体与颜色设置
最新发布
Sunsh1ne_Su的博客
11-27 1698
然后问题来了，QT中lineEdit默认的颜色和设置好的QComboBox QT::Gray颜色有色差，可以通过设置lineEdit的PlaceholderText:默认文本和颜色。这样在第一次选择后，就会将选择的颜色从灰色改为黑色color: #000000；查找多处资料，还是没找到怎么实现的。属性一样默认颜色为灰色，输入内容后变成黑色，结果发现。
表格多选中部分置灰不可选
m0_63026408的博客
06-15 926
在element-ui中列的属性中（Table-column Attributes）有 selectable函数可以根据当前那一条数据的某一个属性进行条件判断，仅对 type=selection 的列有效，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选。返回值为true可以勾选，返回值为false不可以勾选。
checkbox 选中框置灰_easyui datagrid 让某行复选框置灰不能选
weixin_39753260的博客
12-19 244
最近做项目需要类似如标题的效果，根据实际需求整合了一下网上的，内容如下：$('#dg').datagrid({url:"url",method:'post',singleSelect:false,collapsible:true,autoRowHeight:35,fitColumns:true,pagination:true,rownumbers:true,rowStyler:func...
vue复选框全选反选单选
05-20
在 Vue 中，可以通过 v-model 指令绑定复选框的选中状态。实现全选、反选、单选功能可以通过以下方式： 1. 全选：绑定一个全选的复选框，并将其选中状态绑定到一个 Boolean 类型的变量上，然后将所有子复选框的选中状态绑定到这个变量上。当全选复选框的选中状态改变时，通过 v-model 指令将变量的值同步到所有子复选框的选中状态，实现全选功能。 ```html <template> <div> <input type="checkbox" v-model="allSelected"> 全选 <div v-for="(item, index) in items" :key="index"> <input type="checkbox" :value="item" v-model="selectedItems"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'], selectedItems: [], allSelected: false } }, watch: { allSelected(val) { this.selectedItems = val ? this.items : [] } } } </script> ``` 2. 反选：绑定一个反选的按钮，并在点击时通过计算属性将所有子复选框的选中状态取反。 ```html <template> <div> <button @click="toggleSelection">反选</button> <div v-for="(item, index) in items" :key="index"> <input type="checkbox" :value="item" v-model="selectedItems"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'], selectedItems: [] } }, computed: { allSelected: { get() { return this.selectedItems.length === this.items.length }, set(val) { this.selectedItems = val ? this.items : [] } } }, methods: { toggleSelection() { this.selectedItems = this.items.filter(item => !this.selectedItems.includes(item)) } } } </script> ``` 3. 单选：绑定一个单选的复选框，将其选中状态绑定到一个 String 类型的变量上，然后将所有子复选框的选中状态绑定到这个变量上。当子复选框的选中状态改变时，通过 v-model 指令将变量的值同步到单选的复选框的选中状态，实现单选功能。 ```html <template> <div> <input type="checkbox" :value="null" v-model="selectedItem"> 无 <div v-for="(item, index) in items" :key="index"> <input type="checkbox" :value="item" v-model="selectedItem"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['A', 'B', 'C'], selectedItem: null } }, computed: { allSelected: { get() { return this.selectedItems.length === this.items.length }, set(val) { this.selectedItems = val ? this.items : [] } } }, watch: { selectedItem(val) { this.selectedItems = val ? [val] : [] } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值