Question

我正在尝试使用Woocommerce票务插件。默认情况下，该插件会显示一个表格，其中包含多个票证变式作为产品，并带有一个用于其数量的文本字段，并在下面提供一个按钮以将该产品添加到购物车。

我想用单选按钮或复选框替换此文本字段，以便用户可以选择故障单的类型，然后单击“提交”按钮将其添加到购物车中。

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

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

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

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

谢谢！

Answer 1

使用下面的我的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>

选中复选框时，请取消选中页面上的其他复选框

1 个答案: