Uncheck other checkboxes on page when checking a checkbox

Question

I'm trying to work on a Woocommerce ticket plugin. By default, the plugin shows a table including multiple ticket variants as products with a textfield for it`s quantity and a submit button below to add the product(s) to the cart.

I want to replace this textfields with either a radio button or a checkbox so users can select a type of ticket and then hit the submit button to add one piece of it to cart.

My idea is to make either a checkbox or a radio button in the foreach loop that has a value of quantity_ (like the textfield does now) and a value of 1, so that the script adds one ticket to the cart on submitting.

The problem is, that I want to allow users to add only one ticket variant. Radio buttons would suit this, but I would need a different input name for each individual ticket variant. This makes the default behaviour of radio buttons unsuitable, because other radio buttons are not unselected when selecting a radio button with a different name.

I`m looking for some workaround. Either by grouping radio buttons with different names together, or using checkboxes that unselect other checkboxes on the page when clicking them.

Anyone knows a creative solution to this ? I know it might be better to change the script's behaviour to interpret the radio buttons the right way, but I`m not experienced enough nor do I have the time to dig in to the behaviour of woocommerce and/or this script to alter this.

Thanks!

For radio buttons, they all have the same name, but different values. — miken32, Apr 18 '19 at 22:45
Possible duplicate of [html select only one checkbox in a group](https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group) — miken32, Apr 18 '19 at 22:46

StackSlave · Answer 1 · 2019-04-18T23:58:21.370

By using my checkOne function below you just have to pass the element (or not for the entire page). You really only need Q and checkOne to use below.

Example

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

Uncheck other checkboxes on page when checking a checkbox

1 Answers1