更改单选按钮图像,帮助

问题描述:

大家好.我不是一个程序员,但是仍然需要做一些编码.

Hey guys. I'm not much of a programmer, but still need to do some coding.

现在我在使用jQuery更改单选按钮图像时遇到问题. 我已经有了网络上的这段代码,但仍然无法正常工作. 它会更改单选按钮图像,但是当我尝试选择时,它只会更改第一个单选框的图片.(每次)

Now I have a problem with changing Radio Button Image with jQuery. I've got this code of the web but it still doesn't work. It changes the Radio button images, but when I try to select, it changes only the picture of the first radio box.(every time)

这是我的HTML代码:

Here's my HTML code:

   <div id="testcontent">
<div class="questions">
<div id="question0" class="question">
<span class="qutitle">asdg asdg</span>
<FIELDSET class="radios">
<label for="q_0" class="label_radio">
<input id="q_0" type="radio" name="q_0" value="2">dgasdg
</label>
<label for="q_0" class="label_radio">
<input id="q_0" type="radio" name="q_0" value="0"> sdgas 
</label>
<label for="q_0" class="label_radio">
<input id="q_0" type="radio" name="q_0" value="1">dgas 
</label>
</FIELDSET>
</div>

这是CSS.我希望我做对了.

Here's the css. I hope I got it right.

#testcontent .label_check,
#testcontent .label_radio    { padding-left: 34px; }
#testcontent .label_radio    { background: url(radio-off.png) no-repeat; }
#testcontent .label_check    { background: url(check-off.png) no-repeat; }
#testcontent label.c_on      { background: url(check-on.png) no-repeat; }
#testcontent label.r_on      { background: url(radio-on.png) no-repeat; }
#testcontent .label_check input,
#testcontent .label_radio input  { position: absolute; left: -9999px; }

这是jquery代码.

And here's the jquery code.

 function setupLabel() {
        if ($('.label_check input').length) {
            $('.label_check').each(function(){ 
                $(this).removeClass('c_on');
            });
            $('.label_check input:checked').each(function(){ 
                $(this).parent('label').addClass('c_on');
            });                
        };
        if ($('.label_radio input').length) {
            $('.label_radio').each(function(){ 
                $(this).removeClass('r_on');
            });
            $('.label_radio input:checked').each(function(){ 
                $(this).parent('label').addClass('r_on');
            });
        };
    };
    $(document).ready(function(){
        $('.label_check, .label_radio').click(function(){
            setupLabel();
        });
        setupLabel(); 
    });

请告诉我这段代码有什么问题,非常感谢您的帮助.

Please tell me what I is wrong with this code, help is much appreciated.

谢谢.

我真的建议使用 jquery.uniform (因为您已经在使用jQuery或其他等效的替代品)来设置复选框,单选和选择之类的表单元素的样式. 除了将图像放置在真实"表单元素上方之外,还有很多其他功能,例如处理标签上的点击等.

I really recommend using jquery.uniform (since you are already using jQuery, or any equal alternative) for styling form elements like checkbox, radio and select. There is a lot more to it than just placing an image above the 'real' form-element, like handling clicks on the label etc.