3

ラジオボタンを非表示にしたいのですが、ボタンの代わりに、ラジオボタンのラベル自体がクリック可能になり、選択したラジオの背景色を変更します。これどうやってするの？たとえば、「はい」と「いいえ」のラベルがあり、これらのラベルはクリック可能で、ラジオボタンはまったくありません。これらは背景の色を変更するだけですが、不要なラジオボタンを表示しています。

Javascript

$(document).ready(function(){
    var ok = "green";
    var notok = "red";

    $.each($(":radio"), function(){

        if($(this).prop("checked") == false)
        {
            $(this).parent().css("background", notok);
        }
        else
        {
            $(this).parent().css("background", ok );
        }
    })

    $(":radio").click(function(){
        $("[name='"+$(this).prop("name")+"']").parent().css("background", notok);
        $(this).parent().css("background", ok );

    })
})

HTML

<FORM name="form1">
 <div>
        <input type="radio" id="yes" name="q"checked="checked"/> Yes
        </div>
        <div>
        <input type="radio" id="no" name="q"/>No
        </div>


</FORM>

ありがとう

4

2 に答える 2

2

これは実際には一見簡単です。「ラベル」タグを使用するだけで、クリック可能になります。次に、ラジオボタンを非表示にするだけです。

<input id="yes" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="yes">Yes </label>

<input id="no" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="no">No</label>

ところで、これが機能しているJSFiddleです：http：//jsfiddle.net/scGE9/2/

于 2012-06-15T18:05:59.873 に答える
1

あなたが何を求めているか理解できたら、ラジオボタンを非表示にしてから、背景色を変更したラベルにクリックハンドラーをアタッチします。

$('label').click(function () {
   $('label').removeClass('selected');
   $(this).addClass('selected');
});

これがデモンストレーションするjsfiddleです。

つまり、ラベルがクリックされたら、関連するすべてのラベルから背景色を制御する「選択された」クラスを削除し、クリックされたラベルに適用します。

于 2012-06-15T18:28:18.277 に答える