當另一個復選框被選中時取消選中一個復選框

Question

我有麻煩創建一個腳本，即選擇同一行上的另一行時取消選擇Chebock

 function uncheck1(){ document.getElementById("check1").checked = true; document.getElementById("check2").checked = false; document.getElementById("select").disabled = true; } function uncheck2(){ document.getElementById("check1").checked = false; document.getElementById("check2").checked = true; document.getElementById("select").disabled = false; }

 <form name="form" action="action.php" method="post"> <table> <tr> <td> <input type="hidden" value="Carrizo J." name="player[]" /> </td> <td> <label>Carrizo J.</label> </td> <td> <input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" /> </td> <td> <input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" /> </td> <td> <select id="select" name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td> <input type="hidden" value="Handanovic S." name="player[]" /> </td> <td> <label>Handanovic S.</label> </td> <td> <input id="check1" onclick="uncheck1()" type="checkbox" name="titolare[]" value="0" checked="" /> </td> <td> <input id="check2" onclick="uncheck2()" type="checkbox" name="titolare[]" value="1" /> </td> <td> <select id="select" name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>-</td> <td>-</td> <td>-</td> </tr> </table> </form>

而且，很明顯，它只適用於第一行。 如果我選中右側的，則左側的未選中並啟用選擇。 然后，如果我選中左邊的，則未選中右邊的並且 select 被禁用。

有沒有辦法可以對其他 24 行做同樣的事情，而不必為每行寫 2 個函數？

Answer 1

試試這個代碼

 window.onload = function() { // when page loaded var checks = document.querySelectorAll("input[name='titolare[]']"); for (var i = 0; i < checks.length; i++) { // assign to each checkbox checks[i].onclick = function() { var row = this.parentElement.parentElement, // the TR checks = row.querySelectorAll("input[type=checkbox]"), // All checkboxes sel = row.querySelector("select"); // the select in the row sel.disabled = this.value == "0"; // whatever you clicked checks[0].checked = this.value == "0"; checks[1].checked = this.value == "1"; } } }

 <form name="form" action="action.php" method="post"> <table> <tr> <td> <input type="hidden" value="Carrizo J." name="player[]" /> </td> <td> <label>Carrizo J.</label> </td> <td> <input id="check1" type="checkbox" name="titolare[]" value="0" checked="" /> </td> <td> <input id="check2" type="checkbox" name="titolare[]" value="1" /> </td> <td> <select id="select" name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td> <input type="hidden" value="Handanovic S." name="player[]" /> </td> <td> <label>Handanovic S.</label> </td> <td> <input id="check1" type="checkbox" name="titolare[]" value="0" checked="" /> </td> <td> <input id="check2" type="checkbox" name="titolare[]" value="1" /> </td> <td> <select id="select" name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>-</td> <td>-</td> <td>-</td> </tr> </table> </form>

Answer 2

您可以用單選按鈕替換復選框，但需要分別命名每一對，例如使用標簽中的名稱。 如果您確定腳本將在客戶端上運行，則可以保留現有的復選框方案。

一種方法是動態添加點擊偵聽器，同時使用data-屬性為每個復選框添加索引。 單擊帶有偶數索引的復選框時，取消選中下一個奇數。 如果單擊具有奇數索引的一個，請取消選中前一個偶數。

類似的方案可用於選擇，除非您不需要data-屬性，只要只有與復選框對匹配的選擇即可。 我已經把 HTML 精簡了一點……

例如

 function updateSelect(){ var idx = this.dataset.index; // Uncheck related checkbox. If this one's index // is even, uncheck next, otherwise previous var checkboxes = document.querySelectorAll('input[type="checkbox"]'); checkboxes[idx % 2? idx - 1 : +idx +1 ].checked = false; // Get the select elements var selects = document.querySelectorAll('select'); // Find related select based on checkbox index var selIdx = Math.floor(idx/2); // Disable based on whether related checkbox index is odd or even selects[selIdx].disabled = !(idx%2); } window.onload = function(){ var checkboxes = document.querySelectorAll('input[type="checkbox"]'); [].forEach.call(checkboxes,function(cb, idx) { cb.addEventListener('click', updateSelect, false); // Add in index to each checkbox so it's easy to find the previous or next cb.dataset.index = idx; }) }

 <form name="form"> <table> <tr> <td><input type="hidden" value="Carrizo J." name="player[]"> <td><label>Carrizo J.</label> <td><input type="checkbox" name="titolare[]" value="0" checked> <td><input type="checkbox" name="titolare[]" value="1"> <td><select name="ordine[]" disabled> <option>1</option> <option>2</option> </select> <tr> <td><input type="hidden" value="Handanovic S." name="player[]"> <td><label>Handanovic S.</label> <td><input type="checkbox" name="titolare[]" value="0" checked> <td><input type="checkbox" name="titolare[]" value="1"> <td><select name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </table> </form>

請注意，NodeLists 現在是可迭代的，因此您在某些主機中而不是：

[].forEach.call(checkboxes, function(checkbox, index){...})

你可以這樣做：

checkboxes.forEach(function(checkbox, index){...})

但是許多正在使用的瀏覽器可能缺乏支持（暫時）。

Answer 3

我相信這幾乎是您正在尋找的，我認為這些變化是不言自明的：

 function checkChange(elem) { var elemRoot = elem.parentNode.parentNode; elemRoot.querySelectorAll("select[name='ordine[]']")[0].disabled = !elemRoot.getElementsByClassName('memberRadio2')[0].checked; }

 <form name="form" action="action.php" method="post"> <table> <tr> <td> <input type="hidden" value="Carrizo J." name="player[]" /> </td> <td> <label for="titolare1">Carrizo J.</label> </td> <td> <input onclick="checkChange(this)" type="radio" name="titolare1" value="0" checked="" /> </td> <td> <input onclick="checkChange(this)" type="radio" name="titolare1" value="1" class="memberRadio2" /> </td> <td> <select name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td> <input type="hidden" value="Handanovic S." name="player[]" /> </td> <td> <label for="titolare2">Handanovic S.</label> </td> <td> <input onclick="checkChange(this)" type="radio" name="titolare2" value="0" checked="" /> </td> <td> <input onclick="checkChange(this)" type="radio" name="titolare2" value="1" class="memberRadio2" /> </td> <td> <select name="ordine[]" disabled> <option>1</option> <option>2</option> </select> </td> </tr> <tr> <td>-</td> <td>-</td> <td>-</td> </tr> <tr> <td>-</td> <td>-</td> <td>-</td> </tr> </table> </form>

注意：您需要更改服務器端的邏輯以使用多個無線電值（使用單獨的名稱索引）。