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

这篇具有很好参考价值的文章主要介绍了E8-怎么实现控制一组CheckBox中至少选一个。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

起因

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

经过

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

$("#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的选中状态，重新拼接字符串呢。这么做看样子还是比较简单的。

$("#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>