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>