0

3 つのラジオ ボタンと入力フィールドがあります。ラジオ ボタンの下の入力フィールドをクリックするたびに、一番上のラジオ ボタンが選択されます。また、その領域と思われる場所をクリックすると<label>、一番上のラジオ ボタンが選択されます。これは google chrome でのみ発生しているようです (IE8 で試しただけですが、問題はありません)。

私が間違っていたHTMLに何かがあると推測していますが、私は気づいていません...私は現在、同じ名前のラジオボタンが1つのユニットとして機能すると仮定しています。しかし、なぜテキスト フィールドをクリックしても違いが生じるのでしょうか? 名前が違う…!?

<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 で機能しないのはなぜですか?

4

1 に答える 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 に答える