更改单选按钮图像,帮助
嘿伙计们。我不是一个很好的程序员,但仍然需要做一些编码。
现在我在使用 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();
});
请告诉我这段代码有什么问题,非常感谢帮助。
谢谢。
Hey guys. I'm not much of a programmer, but still need to do some coding.
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)
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>
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; }
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.
Thank you.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我真的建议使用 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.
如果您使用 jquery.uniform,则有一个动态选择单选按钮的技巧。
设置表单元素的值后,例如
...只需执行以下操作即可更新单选按钮选择的显示:
If you are using jquery.uniform, there is a trick to selecting a radio button dynamically.
After setting the value of the form element, e.g.
...simply do the following to update the display of the radio button selection:
您的问题是您对所有输入使用相同的 ID,并且 ID 是唯一的。这就是为什么它更改 id="q_0" 的第一个实例
Your problem is that you're using the same ID for all your inputs and ID's are unique. That's why it changes the first instance of the id="q_0"