Question

我有3个单选按钮和一个输入字段。每次单击单选按钮下方的输入字段时，最顶层的单选按钮都会被选中。此外，当我点击似乎是<label>区域的任何地方时，最顶层的单选按钮被选中。这似乎只发生在谷歌浏览器（只是尝试IE8，没有问题）。

我猜测HTML中有一些东西我做错了而且我不知道......我目前假设同名的单选按钮作为一个单元。但为什么单击文本字段会产生影响呢？它有一个不同的名字......？！

<label class="cpr-certification marg3"> 
    <p class="color-4"><span>CPR/AED Certification</span></p>   
    <span class="nontext">
        <input type="radio" class="nontext" name="cpr_cert" value="nc">Not certified<br>    
        <input type="radio" class="nontext" name="cpr_cert" value="ip">In progress<br>  
        <input type="radio" class="nontext" name="cpr_cert" value="cc">Currently certified
    </span> 
    <input type="text" class="textinput" name="cpr_exp" placeholder="Certification expires on:">    
    <span class="error error-empty cprinfo"></span>
</label>

为什么此单选按钮设置在Google Chrome中不起作用？

Answer 1

如问题评论中所述，您的所有输入只有一个标签。在行为方面（包括在开始在文本框中输入时选择正确的单选按钮），以下内容可能就更多了：

<div class="cpr-certification marg3"> 
    <p class="color-4"><span>CPR/AED Certification</span></p>   
    <div class="nontext">
        <label>
            <input type="radio" class="nontext" name="cpr_cert" value="nc">
            Not certified
        </label><br>    
        <label>
            <input type="radio" class="nontext" name="cpr_cert" value="ip">
            In progress
        </label><br>  
        <label>
            <input type="radio" class="nontext" name="cpr_cert" value="cc">
            Currently certified
            <input type="text" class="textinput" name="cpr_exp" placeholder="Certification expires on:">
        </label>
    </div> 

    <div class="error error-empty cprinfo"></div>
</div>

http://jsfiddle.net/wjWvg/

单选按钮不断改变选择 - 出了什么问题？

1 个答案: