JavaScript：表单选择器无法正常工作

Question

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

如果勾选了一个复选框，则还应勾选具有相同值的合作伙伴。或者，如果其中一个复选框未被选中，则其任务也应该被取消。这可以正常一次。如果选中或取消选中这两个复选框，则仅重复检查/取消选中。

＆＃13;

＆＃13;

	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);
	  }
	});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用prop()

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

请参阅：http://api.jquery.com/prop/

＆＃13;

＆＃13;

	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);
	  }
	});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;