单选按钮不断改变选择-怎么了？

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中不能工作？

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/