选中另一个复选框后，取消选中该复选框

debugcn 发表于 Dev

万泽

我有麻烦创建一个脚本，即选择同一行上的另一行时取消选择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>

这是最终结果

同样，它仅在第一行有效。如果我选中了右边的一个，则左边的一个未被选中，并且启用了选择。然后，如果我选中左一个，则不选中右一个，并且选择被禁用。

有没有一种方法可以对其他24行执行相同的操作，而不必为每行编写2个函数？

普伦贡

试试这个代码

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。