时间戳

首页 > 解决方案 > 选中复选框时取消选中页面上的其他复选框

javascript - 选中复选框时取消选中页面上的其他复选框

问题描述

我正在尝试开发 Woocommerce 票务插件。默认情况下，该插件会显示一个表格，其中包括多个票据变体作为产品，其数量的文本字段和下方的提交按钮可将产品添加到购物车。

我想用单选按钮或复选框替换此文本字段，以便用户可以选择一种票证，然后点击提交按钮将其中的一个添加到购物车。

我的想法是在 foreach 循环中创建一个复选框或单选按钮，其值为 quantity_（就像现在的文本字段一样）和值为 1，以便脚本在提交时将一张票添加到购物车。

问题是，我希望允许用户只添加一个票证变体。单选按钮适合这个，但我需要为每个单独的票变体使用不同的输入名称。这使得单选按钮的默认行为不合适，因为在选择具有不同名称的单选按钮时，其他单选按钮不会被取消选择。

我正在寻找一些解决方法。通过将具有不同名称的单选按钮组合在一起，或者使用在单击页面时取消选择页面上其他复选框的复选框。

有人知道对此有创造性的解决方案吗？我知道更改脚本的行为以以正确的方式解释单选按钮可能会更好，但我没有足够的经验，也没有时间深入研究 woocommerce 的行为和/或这个脚本来改变它。

谢谢！

标签： javascripthtml

解决方案

通过使用checkOne下面的函数，您只需传递元素（或不传递整个页面）。你真的只需要Q和checkOne使用下面。

例子

//<![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>

推荐阅读