JavaScript：表单选择器不工作

Question

与问题标题相反，代码正在工作;尽管不完全如预期。

如果勾选了其中一个复选框，则也应勾选具有相同值的伙伴。或者，如果其中一个复选框未被选中，它的参与者也应该被取消选中。这工作正常一次。如果两个复选框都选中或未选中，请重复选中/取消选中触发器。

\t alert("hi!"); 
 

 
\t $(".checkstylin").change(function() { 
 
\t var val = $(this).val(); 
 
\t if ($(this).is(":checked")) { 
 

 
\t  $(":checkbox[value='" + val + "']").attr("checked", true); 
 
\t } else { 
 
\t  $(":checkbox[value='" + val + "']").attr("checked", false); 
 
\t } 
 
\t });

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

Answer 1

使用prop()

在jQuery 1.6的，所述.prop（）方法提供了一种方式，以明确地检索属性值，而.attr（）获取属性。

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

\t alert("hi!"); 
 

 
\t $(".checkstylin").on('change',function() { 
 
\t var val = $(this).val(); 
 
\t if ($(this).is(":checked")) { 
 

 
\t  $(":checkbox[value='" + val + "']").prop("checked", true); 
 
\t } else { 
 
\t  $(":checkbox[value='" + val + "']").prop("checked", false); 
 
\t } 
 
\t });

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