Question

我使用以下代码使用我自己的图片制作自定义复选框。

首先，我添加了JQuery并添加了所需功能的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>


Next...here's the HTML:



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

未经检查的图像在那里但是当我点击它时，它不会改变/切换。

我错过了什么？

更新：

在本地测试此完整代码并且它无效...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>

<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", "http://icdn.pro/images/en/v/e/verify-correct-icone-9268-48.png");
   } else {
       $(this).prev().attr("src", "http://www.theology.edu/Remata/Android/Help/wrongx_icon.png");
   }
});


 });

</script>

</title>




</head>
<body>



<label for="moreinfo">
    <img src="http://www.theology.edu/Remata/Android/Help/wrongx_icon.png"/>
    <input name="moreinfo" type="checkbox" id="moreinfo" style="display:none">
    </label>




</body>
</html>

Answer 1

它正常工作，您可以查看here。

Answer 2

      $("#moreinfo").click(function() {
       var $img =  $(this).prev();
$img.attr("src", ($(this).checked)?"checkbox_checked.gif":"checkbox_unchecked.gif");

    });

JQuery自定义图像复选框代码不切换

2 个答案: