如何使用jQuery設置（「檢查」）具有相同類的所有單選按鈕

我希望使用jQuery設置所有單選按鈕。我的jQuery只設置組中最後一個。如何使用jQuery設置（「檢查」）具有相同類的所有單選按鈕

HTML

<p class="navbar-text navbar-right" style="margin:-4px 0 0 0"> 
<input id="serviceProximity-07-1" name="serviceProximity" type="radio" value="1"><label for="serviceProximity-07-1" style="color:#fff;padding-left:0.5em;padding-right:2.0em">In-Area (Svc Group)</label> 
<input id="serviceProximity-07-0" name="serviceProximity" type="radio" value="0"><label for="serviceProximity-07-0" style="color:#fff;padding-left:0.5em;padding-right:2.0em">Out-of-Area (Svc Group)</label> 
<input id="serviceProximity-07-X" name="serviceProximity" type="radio" value="X"><label for="serviceProximity-07-2" style="color:#fff;padding-left:0.5em;padding-right:2.0em">Clear (Svc Group)</label> 
</p> 


<tbody> 

<tr> 
<th scope="row">V1</th> 
<td>Description 1</td> 
<td><input class="07-1" id="locationProximity-129-1" name="locationProximity" type="radio" value="1"> <label for="locationProximity-129-1">In-Area</label></td> 
<td><input class="07-0" id="locationProximity-129-0" name="locationProximity" type="radio" value="0"> <label for="locationProximity-129-0">Out-of-Area</label></td> 
</tr> 

<tr> 
<th scope="row">S1</th> 
<td>Description 2</td> 
<td><input class="07-1" id="locationProximity-234-1" name="locationProximity" type="radio" value="1"> <label for="locationProximity-234-1">In-Area</label></td> 
<td><input class="07-0" id="locationProximity-234-0" name="locationProximity" type="radio" value="0"> <label for="locationProximity-234-0">Out-of-Area</label></td> 
</tr> 

</tbody>

的JavaScript/jQuery的

<script> 

    $("input[name='serviceProximity']").on('change', function() { 
    //console.log('serviceProximity Changed!'); 
    //console.log($(this).val()); 
    //console.log($(this).attr('id')); 
    var arr = $(this).attr('id').split('-'); 
    //console.log(arr[1]); 
    //console.log(arr[2]); 
    if(arr[2] == '1') $('.' + arr[1] + '-1').prop('checked', true); // ONLY SETS LAST ITEM IN THE STACK 
    else if(arr[2] == '0') $('.' + arr[1] + '-0').prop('checked', true); // ONLY SETS LAST ITEM IN THE STACK 
    else { 
     $('.' + arr[1] + '-1').prop('checked', false); // THIS WORKS BUT NOT SURE IF IT IS ONLY CLEARING LAST ITEM IN STACK DUE TO ISSUE ABOVE 
     $('.' + arr[1] + '-0').prop('checked', false); // THIS WORKS BUT NOT SURE IF IT IS ONLY CLEARING LAST ITEM IN STACK DUE TO ISSUE ABOVE 
    } 
    }); 

</script>

目的是檢查所有的「中區」的基礎上serviceProximity檢查，檢查所有的根據serviceProximity中的檢查確定「超出區域」，並在勾選清除時清除所有檢查。

修訂：

嘗試在前面加上「sg-」在情況下，目標類的JavaScript/jQuery的不喜歡開頭的數字類，但沒有做的伎倆。

Started a fiddle

來源

2017-04-21 H. Ferrence

您應該考慮在HTML中使用'data-'屬性來處理匹配，而不是將數據編碼到您的ID中。讓你更容易找出你想要的部分在哪裏。 –

一次只能選擇一個單選按鈕。如果你想能夠選擇多個，他們需要是複選框。 – blackandorangecat

嗯，你的評論@blackandorangecat不清楚。你是說沒有可能的方式來使用jQuery來自動檢查一系列單選按鈕嗎？ –

你必須改變單選按鈕組的name屬性，因爲在一組具有相同名稱的單選按鈕中只有一個單選按鈕可以選擇任何時間。在這種情況下，最後一個因爲道具在最後一個被改變了。

<tr> 
    <th scope="row">V1</th> 
    <td>Description 1</td> 
    <td><input class="07-1" id="locationProximity-129-1" name="locationProximity1" type="radio" value="1"> <label for="locationProximity-129-1">In-Area</label></td> 
    <td><input class="07-0" id="locationProximity-129-0" name="locationProximity1" type="radio" value="0"> <label for="locationProximity-129-0">Out-of-Area</label></td> 
</tr> 

<tr> 
    <th scope="row">S1</th> 
    <td>Description 2</td> 
    <td><input class="07-1" id="locationProximity-234-1" name="locationProximity2" type="radio" value="1"> <label for="locationProximity-234-1">In-Area</label></td> 
    <td><input class="07-0" id="locationProximity-234-0" name="locationProximity2" type="radio" value="0"> <label for="locationProximity-234-0">Out-of-Area</label></td> 
</tr>

來源

2017-04-21 15:33:56

如何使用jQuery設置（「檢查」）具有相同類的所有單選按鈕

回答

相關問題