0

我有 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>

为什么这个单选按钮设置在谷歌浏览器中不起作用？

4

1 回答 1

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/

于 2013-07-20T22:20:54.157 回答