选中复选框时取消选中页面上的其他复选框
我正在尝试一个Woocommerce票证插件。默认情况下，该插件会显示一个表，其中包含多个票证变体作为产品，并在下面显示一个文本字段作为其数量和一个提交按钮，以将产品添加到购物车中。
我想用单选按钮或复选框替换这个文本字段，这样用户就可以选择一种类型的票证，然后点击提交按钮将其中的一部分添加到购物车中。
我的想法是在foreach循环中创建一个复选框或单选按钮，该复选框或单选按钮的值为quantity_u（就像现在的textfield一样），值为1，以便脚本在提交时向购物车添加一张票据。
问题是，我希望允许用户只添加一个票证变体。单选按钮将适合这一点，但我需要为每个单独的票证变体提供不同的输入名称。这使得单选按钮的默认行为不合适，因为当选择具有不同名称的单选按钮时，其他单选按钮不会取消选择。
我在找一些解决办法。通过将具有不同名称的单选按钮分组在一起，或使用在单击页面上取消选中其他复选框的复选框。
有人知道创造性的解决方案吗？我知道改变脚本的行为以正确地解释单选按钮可能更好，但是我没有足够的经验，也没有时间深入研究WooCommerce和/或这个脚本的行为来改变这一点。
谢谢！
共有1个答案
通过使用下面的check One函数，您只需传递元素（或者不传递整个页面）。你真的只需要Q和check One就可以在下面使用。
实例
//<![CDATA[
var doc, bod, M, I, S, Q, checkOne; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
T = function(tag){
return doc.getElementsByTagName(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
checkOne = function(within){
for(var i=0,q=Q('input[type=checkbox]', within),l=q.length; i<l; i++){
(function(i){ // closure - i would be at end of loop onclick otherwise
q[i].onclick = function(){
var ic = this.checked; // save checked value
if(ic){ // if this one is checked uncheck all
for(var n=0; n<l; n++){
q[n].checked = false;
}
}
this.checked = ic; // preserve checked - change to true to force a box to be checked
}
}(i));
}
}
checkOne(I('test')); // leave out that argument to target entire page
}); // end load
//]]>/* external.js */
*{
box-sizing:border-box; padding:0; border:0; margin:0;
}
html,body,body>*{
width:100%; height:100%;
}
body{
background:#ccc; font:22px Tahoma, Geneva, sans-serif;
}
#test{
margin:20px;
}
#test>label{
display:block; float:left; clear:left; margin-bottom:7px;
}
#test>label+input{
display:block; float:left; margin:7px 0 0 4px;
}<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>checkOne Example</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div id='test'>
<label for='box1'>box1</label><input id='box1' type='checkbox' value='1' />
<label for='box2'>box2</label><input id='box2' type='checkbox' value='2' />
<label for='box3'>box3</label><input id='box3' type='checkbox' value='3' />
<label for='box4'>box4</label><input id='box4' type='checkbox' value='4' />
<label for='box5'>box5</label><input id='box5' type='checkbox' value='5' />
<label for='box6'>box6</label><input id='box6' type='checkbox' value='6' />
<label for='box7'>box7</label><input id='box7' type='checkbox' value='7' />
</div>
</body>
</html>-
我创建了一个windows窗体（到目前为止）只包含复选框。构造函数接受一个参数:。对于这个数组中的每个字符串，我都会创建一个复选框。 例如： null 那么，当另一个复选框调用uncheck时，是否有一种方法可以告诉我的复选框不要运行？ 下面是我的代码（它都是手工编写的，所以没有使用visual studio设计器）：
-
我试图创建一个表单，该表单顶部有一个复选框，当用户选中该复选框时，它会选择其他特定的复选框，但不是所有复选框。我很难通过反复试验或搜索找到答案。我唯一能找到的就是“全选”选项。不是我想要的。 理想情况下，当用户选中“管理包”旁边的复选框时，我想要“Chrome外观组”和“远程启动” 下面是代码和我在这方面的基本尝试，但它不起作用。提前谢谢。 超文本标记语言： Javascript 我不知道这个Ja
-
下载整个项目。zip在这里 此问题的代码在Views文件夹中的CreateSchedule.aspx文件中。 以下是GridView的ASP.NET： 在取消选中某个框后调试事件时，网页上的复选框显示为未选中，但的值为true，即使该复选框在网页上显示为未选中。（chkRow是未选中的复选框） 更新3 我取得了一些突破。我发现复选框的问题在于嵌套的gridview位于使用JavaScript折叠和
-
选中“第一键”复选框时，我想选中并禁用“第二键”复选框 html代码 为复选框键入脚本代码 } 通过使用此代码，key 2复选框被选中并禁用。但是key 2复选框的布尔值仍然是假的。当我单击key 1复选框时，关于如何将key 2复选框的布尔值更改为true的任何建议我正在使用Angular 8及其反应式形式模块。我是角度新手。
-
我有一个复选框，其中有一对项目，当我单击该复选框时，该项目将添加到名为currentDevice的状态，但当我取消选中该项目时，它将保留“添加项目”，而不是删除它。 当我取消选中该框时，如何从状态中删除项。Im使用“反应本机元素”复选框。谢谢你 代码：
-
问题内容： 首先，我使用的是最新版本的Oracle ApEx 4.1.1，并且具有以下具有复选框选择的标准报告，因此，在单击时，希望使用sysdate设置另一个字段，包括时间。 取消选中时，想将我之前的语句以及注释字段中设置的日期重置为NULL。 报告可能如下所示： 作为上述报告的示例，总共可能有10条记录，因此，由于用户选中了10条记录复选框中的每一个，因此我想当场将日期字段设置为sysdate