選中復選框后，取消選中頁面上的其他復選框

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 個解決方案

解決方案1
0 2019-04-18 23:03:58

選中復選框后，取消選中頁面上的其他復選框

問題描述

1 個解決方案

解決方案1 0 2019-04-18 23:03:58

解決方案1
0 2019-04-18 23:03:58