如何在表单上检查多个单选按钮

时间:2014-02-27 23:30:53

标签: javascript jquery html css

以下是我的代码。

<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。每个过滤搜索框都有自己的几个单选按钮,我想要的是我应该能够检查第一个过滤搜索框中的一个单选按钮,然后在第二个过滤搜索框中检查另一个。但是我只允许只有一个单选按钮来检查一个页面,因此我无法检查多个单选按钮?

但是为什么我不能用这种方法来实现这一点......我原以为两个过滤搜索框会使单选按钮彼此独立......

有什么想法吗?

2 个答案:

答案 0 :(得分:4)

单选按钮由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属性的差异。

答案 1 :(得分:1)

单选按钮只能选择一个值,正如Dryden所说,共享名称=&#34; clienttype&#34;将共享选择,并且只有一个可以处于活动状态,因此更改名称属性,或者如果您想要多个选项,请更好地使用复选框。