單選按鈕不斷改變選擇 - 怎麼了？

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> 

爲什麼此單選按鈕設置在谷歌瀏覽器中不起作用？

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/