更改单选按钮图像，帮助答案

【问题标题】：Changing Radio Buttons image, help更改单选按钮图像，帮助
【发布时间】：2011-03-29 00:58:52
【问题描述】：

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

现在我在使用 jQuery 更改单选按钮图像时遇到问题。我有这个网络代码，但它仍然不起作用。它会更改单选按钮的图像，但是当我尝试选择时，它只会更改第一个单选框的图片。（每次）

这是我的 HTML 代码：

   <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。我希望我做对了。

#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 代码。

 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(); 
    });

请告诉我这段代码有什么问题，非常感谢帮助。

谢谢。

【问题讨论】：

标签： jquery css radio-button

【解决方案1】：

我真的建议使用jquery.uniform（因为您已经在使用 jQuery 或任何同等替代方案）来设置表单元素的样式，例如复选框、单选和选择。除了将图像放置在“真实”表单元素上方之外，它还有很多其他功能，例如处理标签上的点击等。

【讨论】：

谢谢，这样容易多了。

【解决方案2】：

如果您使用的是 jquery.uniform，则有一个技巧可以动态选择单选按钮。

设置表单元素的值后，例如

$("[name='buttongroup']['value='male']").attr("checked", true);

...只需执行以下操作即可更新单选按钮选择的显示：

$.uniform.update();

【讨论】：

【解决方案3】：

您的问题是您对所有输入都使用相同的 ID，并且 ID 是唯一的。这就是为什么它改变了 id="q_0" 的第一个实例

【讨论】：