取消选中当另一个复选框被选中

Question

我有麻烦创建时，在同一线路上的其他选择

 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>

是取消某chebock脚本复选框

由于并且，显然，它只适用于第一行。 如果我检查了正确的一个，则左边的一个未被选中，并且选择被启用。 然后，如果我检查左侧，右侧没有选中，选择被禁用。

有没有办法能够对其他24行做同样的事情，而不必为每个行写两个函数？

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

可以替换单选按钮的复选框但需要分别命名每一对，例如使用标签中的名称。如果您确定该脚本将在客户端上运行，您可以保留现有的复选框方案。

一种方法是动态添加点击侦听器，并同时使用属性为每个复选框添加索引。当单击具有偶数索引的复选框时，取消选中下一个奇数。如果点击一个奇数索引，取消选中前一个。

类似的方案可用于选择，除非你不需要数据 -属性，只要有只选择匹配复选框对。我已经减少了一点HTML ...

E.g.

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>

注意：您将需要在更改逻辑服务器端利用多个无线电值（使用不同的名称进行索引）。