次のコードを使用して、自分のイメージでカスタムチェックボックスを作成しています。JQueryカスタムイメージチェックボックスコードがトグルしない
最初に私は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>
未確認のイメージがあるが、私はそれをクリックしたときに、それは/トグルを変更しません。
私には何か不足していますか?
UPDATE:
テストこの完全なコードローカル、それはそれが働いて...
<!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>
私はそれが働いていることに同意しますが、私がテストしている上記の完全なコードを参照してください。試してみてください...何らかの理由でうまく動作しません:o/ – Satch3000
タイトルタグにスクリプトコードを書いたので動作しません。 – ocanal
それは悪かった...ありがとう! – Satch3000