E8-怎么实现控制一组CheckBox中至少选一个

news/2024/7/11 1:11:31 标签: javascript, jquery, 其他

起因

这算是前两篇关于CheckBox控制的后续吧,在 E8-控制一组CheckBox的单选_checkbox 实现单选_rarenmen的博客-CSDN博客 的评论里,有小哥也提到了这个问题,说当所控制的复选框,一个都不选的时候也可以提交。其实,我是有做控制的,但只是在只允许选一个CheckBox的时候控制了必填,允许选多个的情况也在考虑了,只是当时没有想好怎么去实现,现在想得比较清楚了,也用到了生产环境里,特地来做一下记录,分享一下。

经过

我实现必填的方法是这样的,在表单里插入一个单行文本框,用来记录“选定的值”,放在流程节点里有这两个CheckBox编辑权限的节点的表单里,设置属是必填。还是以两个CheckBox为例,一个代表同意,一个代表不同意。当点击代表同意的CheckBox的时候,判断选中状态,如果是“选中”状态,那么在单行文本框里写“同意”,如果不是选中状态,那么清空单选文本框里的内容。代表不同意的CheckBox在点击时做同样处理,写入文单行文本框里的内容改成“不同意”。这么做还有另外一个好处是在做报表的时候也会直观一些。

<script type="text/javascript">
jQuery(document).ready(function(){

    $("#field10440").click(function(){

        if($(this).prop("checked")){

            $("#field10464").val("同意");
        } else {
            $("#field10464").val("");
        }
    });

    $("#field10441").click(function(){

        if($(this).prop("checked")){

            $("#field10464").val("不同意");
        } else {
            $("#field10464").val("");
        }
    });

});

</script>

在处理允许多选的一组CheckBox的必填的时候,我还是想沿用上面的方法,只是思路图做调整,还是以两个CheckBox,分别代表“同意”和“不同意”,当选中“同意”的时候,在单行文本框内容后面追加“同意,”,当选中“不同意”的时候,向单行文本框内容后面追加“不同意,”,当取消选中“不同意”的时候,替换掉单行文本框里的“不同意,”,到这里的时候还是没有任何问题的,但如果按这个思路设计下去,取消选中的处理就会比较麻烦了。颠倒一下操作顺序,当两个CheckBox同时被选中的时候,首先取消选中“同意”的时候,替换掉单行文本框里的“同意,”之后,可能文本框里只会剩个“不”了。按这个思路有产生了一个升级版的思路,在取消选中的时候,做这么几件事:1、在字符串前面加一个不会被用到的定界符,比如加一个“#”,先把字符串变成“#同意 ,不同意,”;2、把所有的“,”都替换成“,#”,经过一番操作之后字符串会变成“#同意 ,#不同意,”,3、当取消选中的时候需要替换掉的字符串还要加工一下,比如当取消选中“同意”的时候,替换掉单行文本框里的“#同意,”,字会串变成了“#不同意,”。4、去掉字符串里剩余的“#”,仅保留有效信息。这么做理论上倒是没什么问题,但总觉得有些啰嗦,即使把追加字符串和去掉字符串的操作写成方法,那也涉及判断当前CheckBox的状态去调用不同的方法,还要给方法传递参数等操作,让我越想越烦,难道没有个简便方法吗。

还好在我把上面的思路变成代码之前,又有了一个思路。之前的思路,总结起来是,当选中CheckBox的时候,在单行文本框里增加内容,当取消选中CheckBox的时候,在单行文本框里减少内容。那何不在当点击CheckBox的时候,选去清空单行文本框里的内容,去判断范围内的各个CheckBox的选中状态,重新拼接字符串呢。这么做看样子还是比较简单的。

<script type="text/javascript">
jQuery(document).ready(function(){

    $("#field10440, #field10441").click(function(){
        appendStr();
    });
});

function appendStr() {
    var str = "";
    if($("#field10440").prop("checked")) {
        str = str + "同意,";
    }
    if($("#field10441").prop("checked")) {
        str = str + "不同意,";
    }
    $("#field10464").val(str);
}

</script>

结果

功能实现了,没有问题,其实实现这功能是在控制多个CheckBox控制至少选一个的同时,记录了选择了哪个或哪些个ChekBox。

总结一下技术上的知识点,JQUERY里,给多个控件绑定同一个事件的时候,可以在选择器里写多个控件名,在E8里同样适用。

思路上从起初的增加和减少文字的方式,变成每次点击都会推倒重来的方式。

尝试突破固化思路,以免思路僵化。


http://www.niftyadmin.cn/n/469472.html

相关文章

交叉熵、Focal Loss以及其Pytorch实现

交叉熵、Focal Loss以及其Pytorch实现 本文参考链接&#xff1a;https://towardsdatascience.com/focal-loss-a-better-alternative-for-cross-entropy-1d073d92d075 文章目录 交叉熵、Focal Loss以及其Pytorch实现一、交叉熵二、Focal loss三、Pytorch1.[交叉熵](https://pyto…

【Pytorch】梯度裁剪——torch.nn.utils.clip_grad_norm_的原理及计算过程

文章目录 一、torch.nn.utils.clip_grad_norm_二、计算过程三、确定max_norm 众所周知&#xff0c;梯度裁剪是为了防止梯度爆炸。在训练FCOS算法时&#xff0c;因为训练过程出现了损失为NaN的情况&#xff0c;在github issue有很多都是这种训练过程出现loss为NaN&#xff0c;作…

C++静态和动态链接库导出和使用

1、简介 代码开发过程中会遇到很多已有的函数库&#xff0c;这些函数库是现有的&#xff0c;成熟的&#xff0c;可以复用的代码。现实中每个程序都要依赖很多基础的底层库&#xff0c;不可能每个人的代码都从零开始&#xff0c;因此库的存在意义非同寻常。 本质上来说库是一种…

【Redis】多级缓存之缓存数据同步策略与Canal

目录 一、数据同步策略 1.设置有效期 2.同步双写 3.异步通知 二、Canal 三、监听Canal 一、数据同步策略 缓存数据同步的常见方式有三种&#xff1a; 1.设置有效期 给缓存设置有效期&#xff0c;到期后自动删除。再次查询时更新&#xff0c;他简单、方便&#xff0c;但…

vue 初始化方法 create,beforeMount,mount,computed,watch 方法执行顺序及使用场景

前言:vue 存在一些基本属性和相关对象如果合理使用&#xff0c;可以避免代码混乱 VUE初始化属性和方法 执行顺序方法说明备注说明 执行顺序 create beforeMount computed mounted watch 方法说明 created执行时挂载阶段还没有开始&#xff0c;模版还没有渲染成html&#xff…

LETCODE_001729_求关注者的数量

-- 1729. 求关注者的数量 -- 表&#xff1a; Followers -- -- ------------------- -- | Column Name | Type | -- ------------------- -- | user_id | int | -- | follower_id | int | -- ------------------- -- (user_id, follower_id) 是这个表的主键。 -- 该表包含…

云从科技大模型之路:昇思“黑土地”上的生态炼成记

文 | 智能相对论 作者 | 李永华 一线客户经理&#xff0c;为客户一键生成周全的资产配置建议&#xff1b; 中端管理人员&#xff0c;获得系统自动撰写的一整套数据分析报表&#xff0c;快速、准确授信&#xff1b; 金融市场的“操盘手”&#xff0c;能够实时获取那些影响市…

[由零开始整树莓派]树莓派换源ustc

安装好系统后的第一件重要的事个人觉得应该就是更换软件源了&#xff0c;因为原装 Linux 系统自带的软件源服务端都在国外&#xff0c;想要安装软件会很慢。 树莓派更新软件源&#xff1a; 查看树莓派的版本&#xff1a;lsb_release -a&#xff0c;我的是buster 1、切换到ro…