我正在try 创建一些复选框,当选中这些复选框时,将选中另一个...我得go 工作了!但是,我现在遇到的问题是,如果 Select 了多个,但在任何时候取消选中一个,那么无论如何都不会选中其他复选框.我希望找到一种方法来使其他复选框保持选中状态,只要其他复选框中有一个处于选中状态,如果没有选中,则取消选中.

例如:我有4个复选框,如果用户 Select #1,我想选中#2.或者,如果用户 Select #1+#3,则选中#2,但如果未选中#3,则#2与1、3或4相同.我希望这是有道理的.我一直在try 不同的方法,但这是我登陆的代码.任何关于实现这一目标的更好方法的帮助和建议都将受到极大的感谢.

var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");

chk1.on('change', function(){
  chk2.prop('checked',this.checked);
});
chk3.on('change', function(){
  chk2.prop('checked',this.checked);
});
chk4.on('change', function(){
  chk2.prop('checked',this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="user_name">1
<br>
<input type="checkbox" value="2" class="user_name">2
<br>
<input type="checkbox" value="3" class="user_name">3
<br>
<input type="checkbox" value="4" class="user_name">4

推荐答案

如果要保持选中chk2,直到取消选中所有其他框,则必须在每个事件处理程序中查找所有其他框的状态.理想情况下,您应该为此创建一个函数,因此不需要为所有处理程序重复代码.

function toggleChk2() {
  let check2 = (chk1.is(':checked') ||
      chk3.is(':checked') ||
      chk4.is(':checked'))
  chk2.prop('checked',check2);
}

chk1.on('change', function(){
  toggleChk2();
});
chk2.on('change', function(){
  toggleChk2();
});
chk3.on('change', function(){
  toggleChk2();
});
chk4.on('change', function(){
  toggleChk2();
});

如果您想防止手动更改该复选框,也可以将此函数添加到chk2的更改处理程序中.

Javascript相关问答推荐

在卡信息之间切换

如何将拖放功能添加到我已自定义为图像的文件输入HTML标签中?

JS生成具有给定数字和幻灯片计数的数组子集

将数据从strapi提取到next.js,但响应延迟API URL

在分区内迭代分区

使用axios.获取实时服务器时的404响应

IMDB使用 puppeteer 加载更多按钮(nodejs)

单击子元素时关闭父元素(JS)

角色 map 集/spritebook动画,用户输入不停止在键上相位器3

如何修复我的js构建表每当我添加一个额外的列作为它的第一列?

在react js中使用react—router—dom中的Link组件,分配的右侧不能被 destruct ''

我的角模板订阅后不刷新'

Html文件和客户端存储的相关问题,有没有可能?

如何在ASP.NET JavaScript中使用Google Charts API仅对绘制为负方向的条形图移动堆叠条形图标签位置

如何在Angular拖放组件中同步数组?

在开发期间,Web浏览器如何运行&qot;.jsx&qot;文件?

如何在 Select 文本时停止Click事件?

Jest toHaveBeenNthCalledWith返回当前设置的变量值,而不是调用时的值

React:防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

将相关数据组合到两个不同的数组中