如何讓多個單選按鈕保持在表格上檢查

Question

下面是我的代碼如下。

<div class="filter_client_search_container"> 
<div class="filter_search_box" style="margin-top:15px;float:left;margin-right:5px;width:349px;"> 
    <div class="filter_field"> 
     <input type="radio" id="allindividuals" name="clienttype"> 
     <label for="allindividuals" style="width:260px">All Individuals</label> 
    </div> 
    <div class="filter_field"> 
     <input type="radio" id="byindividual" name="clienttype"> 
     <label for="byindividual" style="width:146px;">By Individual Name</label> 
     <input type="text" name="clientcriteria"> 
    </div> 
    <div class="filter_search_criteria" style="left:186px;"> 
     <input type="button" name="APPLY" value="Apply"> 
    </div> 
</div> 

<div class="filter_search_box" style="margin-top:15px;float:left;width:352px;margin-right:5px;"> 
    <div class="filter_field"> 
     <input type="radio" id="allcompanies" name="clienttype" value="allclients" checked> 
     <label for="allcompanies" style="width:260px;">All Companies</label> 
    </div> 
    <div class="filter_field"> 
     <input type="radio" id="bycompany" name="clienttype" value="byclient"> 
     <label for="bycompany" style="width:149px;">By Company Name</label> 
     <input type="text" name="byclientcriteria"> 
    </div> 
    <div class="filter_search_criteria" style="left:189px;"> 
     <input type="button" name="APPLY" value="Apply"> 
    </div> 
</div> 
</div> 

我在這裏得到的是，我有「filter_client_search_container」div包含兩個過濾搜索框div。每個過濾器搜索框都有一些自己的單選按鈕，我想要的是我應該能夠在第一個過濾器搜索框中檢查一個單選按鈕，然後在第二個過濾器搜索框中檢查另一個單選按鈕。但我只允許只有一個單選按鈕來檢查單個頁面，因此我不能有多個單選按鈕檢查？

但爲什麼我不能acccomplish這種使用這種方法......我還以爲兩個過濾搜索框就會使單選按鈕互相獨立的...

任何想法？

Answer 1

單選按鈕只能選擇一個值，正如Dryden所說，共享name =「clienttype」的單選按鈕將共享該選擇，並且只有一個可以處於活動狀態，因此更改name屬性或者需要多個選項更好地使用複選框。

Answer 2

單選按鈕通過name屬性鏈接。在所有name="clienttype"單選按鈕中，只能選擇1.如果要選擇多個，請將它們更改爲複選框或更改名稱值。

重新閱讀您的文章後，它看起來像你需要做的是給一個div中的單選按鈕相同的名稱，然後給另一個div中的單選按鈕一個不同的名稱。例如，如下所示：

<div class="filter_client_search_container"> 
<div class="filter_search_box" style="margin-top:15px;float:left;margin-right:5px;width:349px;"> 
    <div class="filter_field"> 
     <input type="radio" id="allindividuals" name="clienttype1"> 
     <label for="allindividuals" style="width:260px">All Individuals</label> 
    </div> 
    <div class="filter_field"> 
     <input type="radio" id="byindividual" name="clienttype1"> 
     <label for="byindividual" style="width:146px;">By Individual Name</label> 
     <input type="text" name="clientcriteria"> 
    </div> 
    <div class="filter_search_criteria" style="left:186px;"> 
     <input type="button" name="APPLY" value="Apply"> 
    </div> 
</div> 

<div class="filter_search_box" style="margin-top:15px;float:left;width:352px;margin-right:5px;"> 
    <div class="filter_field"> 
     <input type="radio" id="allcompanies" name="clienttype2" value="allclients" checked> 
     <label for="allcompanies" style="width:260px;">All Companies</label> 
    </div> 
    <div class="filter_field"> 
     <input type="radio" id="bycompany" name="clienttype2" value="byclient"> 
     <label for="bycompany" style="width:149px;">By Company Name</label> 
     <input type="text" name="byclientcriteria"> 
    </div> 
    <div class="filter_search_criteria" style="left:189px;"> 
     <input type="button" name="APPLY" value="Apply"> 
    </div> 
</div> 
</div> 

注意name屬性中的差異。