JavaScript:表单选择器不工作

JavaScript: form selector not working

本文关键字：工作 选择器 表单 JavaScript      更新时间：2023-09-26

与问题标题相反，代码正在工作;虽然不完全是预期的。

如果一个复选框被选中，那么具有相同值的伙伴也应该被选中。另外，如果其中一个复选框未被选中，则其伙伴也应被取消选中。一次就可以正常工作。当两个复选框都被选中或未选中时，重复触发选中/取消选中。

	alert("hi!");
	$(".checkstylin").change(function() {
	  var val = $(this).val();
	  if ($(this).is(":checked")) {
	    $(":checkbox[value='" + val + "']").attr("checked", true);
	  } else {
	    $(":checkbox[value='" + val + "']").attr("checked", false);
	  }
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="9">
    <td>9.00</td>
    <td style="background-color:#FFCCCC">
      <input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
    <td style="background-color:#">
      <input class="checkstylin" name="9" title="B103" type="checkbox" value="MOD30010">MOD30010</td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td style="background-color:#FFCCCC">
      <input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
    <td>High</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td style="background-color:#">
      <input class="checkstylin" name="10" title="B103" type="checkbox" value="MOD30060">MOD30060</td>
    <td>High</td>
  </tr>
  <tr id="12">
    <td>12.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="13">
    <td>13.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="14">
    <td>14.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="15">
    <td>15.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="16">
    <td>16.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="17">
    <td>17.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="18">
    <td>18.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
</table>
<input type="submit" value="submit">
</form>
</div>

使用prop()

从jQuery 1.6开始，.prop()方法提供了一种显式检索属性值的方法，而.attr()则是检索属性。

见:http://api.jquery.com/prop/

	alert("hi!");
	$(".checkstylin").on('change',function() {
	  var val = $(this).val();
	  if ($(this).is(":checked")) {
	    $(":checkbox[value='" + val + "']").prop("checked", true);
	  } else {
	    $(":checkbox[value='" + val + "']").prop("checked", false);
	  }
	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="9">
    <td>9.00</td>
    <td style="background-color:#FFCCCC">
      <input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
    <td style="background-color:#">
      <input class="checkstylin" name="9" title="B103" type="checkbox" value="MOD30010">MOD30010</td>
  </tr>
  <tr id="10">
    <td>10.00</td>
    <td style="background-color:#FFCCCC">
      <input class="checkstylin" name="1" title="B106" type="checkbox" value="MOD10110">MOD10110</td>
    <td>High</td>
  </tr>
  <tr id="11">
    <td>11.00</td>
    <td style="background-color:#">
      <input class="checkstylin" name="10" title="B103" type="checkbox" value="MOD30060">MOD30060</td>
    <td>High</td>
  </tr>
  <tr id="12">
    <td>12.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="13">
    <td>13.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="14">
    <td>14.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="15">
    <td>15.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="16">
    <td>16.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="17">
    <td>17.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
  <tr id="18">
    <td>18.00</td>
    <td>High</td>
    <td>Low</td>
  </tr>
</table>
<input type="submit" value="submit">
</form>
</div>

相关文章：