从复选框到收音机的JQuery自定义图像

时间:2012-01-11 13:47:50

标签: javascript jquery

我使用以下代码使用我自己的图像制作自定义复选框,但它可以使用复选框,我需要使用单选按钮。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
 $(document).ready(function(){

$("#moreinfo").change(function() {
   if(this.checked) {
       $(this).prev().attr("src", "checkbox_unchecked.gif");
   } else {
       $(this).prev().attr("src", "checkbox_checked.gif");
   }
});

 });

</script>

下一步......这是HTML:

<label for="moreinfo">
     <img src="checkbox_unchecked.gif"/>
     <input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
</label>

如果是从复选框更改为无线电类型的问题,或者jquery是否也需要更改?

我该怎么做?

2 个答案:

答案 0 :(得分:2)

type="checkbox"更改为type="radio"(并添加一些用于测试的单选按钮,通过name属性对其进行分组,它们可能与ID不同id是独特的!)。然后,您还需要处理替换图像的单击事件。 但实际上,这超出了你原来的问题,你可以通过简单地尝试解决这个问题。 ;)

答案 1 :(得分:0)

单选按钮也使用选中的属性。因此,您可以在不更改脚本(可能是GIF)的情况下切换元素。 但是您的脚本永远不会运行,因为您的复选框/单选按钮不会显示。 因此,在单击图像时需要一些功能来更改状态。