jQueryカスタムラジオボタンがラジオボタンとして機能しない

Question

カスタムラジオボタンにJQueryとカスタムイメージを使用しています。今は、チェックボックスとして機能します。私はラジオとして働くためにそれが必要です。

どちらのラジオもクリックすると、一度に1つずつではなく、両方のラジオがチェックされます。何か不足していますか？

HTML：

<label for="radio1"> 
    <img src="radio_unchecked.png" style="vertical-align:middle" /> 
    <input name="radiogroup" type="radio" id="radio1" style="display:none;"> 
</label> 

<label for="radio2"> 
    <img src="radio_unchecked.png" style="vertical-align:middle" /> 
    <input name="radiogroup" type="radio" id="radio2" style="display:none;"> 
</label> 

はJavaScript：

$(document).ready(function() { 

    $("#radio1").change(function() { 
     if (this.checked) { 
      $(this).prev().attr("src", "radio_checked.png"); 
     } else { 
      $(this).prev().attr("src", "radio_unchecked.png"); 
     } 
    }); 


    $("#radio2").change(function() { 
     if (this.checked) { 
      $(this).prev().attr("src", "radio_checked.png"); 
     } else { 
      $(this).prev().attr("src", "radio_unchecked.png"); 
     } 
    }); 

}); 

Answer 1

ラジオボタンが正しく動作しています（proof）が、イメージを更新するロジックが正しくありません。 両方の値が変更されているため（ラジオボタンをクリックしたときにはchangeハンドラのみがクリックされたため）、イメージは両方とも変更する必要があります。例えば、両方のラジオボタンで使用される単一のchangeハンドラを持っており、すべての変更の両方の画像を設定します。

$('#radio1, #radio2').change(function() { 
    var r; 

    r = $("#radio1"); 
    r.prev().attr("src", r[0].checked ? checkedImage : uncheckedImage); 
    r = $("#radio2"); 
    r.prev().attr("src", r[0].checked ? checkedImage : uncheckedImage); 

}); 

Live example

---

サイドノートを：あなたのターゲットブラウザが:checked pseudo-class（IEをサポートしている場合にのみありIE9のようではなく、IE8以前では、この）とadjacent sibling combinator CSS3から、あなたは完全にCSSでこれを行うことができます。

HTML：

<input type="radio" name="radiogroup" id="radio1" style="display: none"> 
<label for="radio1"></label> 
<input type="radio" name="radiogroup" id="radio2" style="display: none"> 
<label for="radio2"></label> 

CSS：

#radio1 + label, #radio2 + label { 
    display: inline-block; 
    background-image: url(radio_unchecked.png); 
    width: 32px; /* Whatever matches the images */ 
    height: 32px; /* Whatever matches the images */ 
} 
#radio1:checked + label, #radio2:checked + label { 
    background-image: url(radio_checked.png); 
} 

Live example

または交互に（それだけ異なっているセレクタです）：変更された唯一のラジオボタンの

input[name="radiogroup"] + label { 
    display: inline-block; 
    background-image: url(radio_unchecked.png); 
    width: 32px; /* Whatever matches the images */ 
    height: 32px; /* Whatever matches the images */ 
} 
input[name="radiogroup"]:checked + label { 
    background-image: url(radio_checked.png); 
} 

Answer 2

交換してみてください。これで

this.checked 

：

$(this).is(':checked') 

Answer 3

changeイベントが発生しますそのプロセスで自動的にチェックが外されている可能性のある他のラジオボタンではありません。

var radios = $('input:radio'); 

radios.change(function() { 
    radios.filter(':checked').prev().attr("src", "radio_checked.png"); 
    radios.filter(':not(:checked)').prev().attr("src", "radio_unchecked.png"); 
}); 

これは、ラジオボタンの任意の数ののために動作します：任意のラジオボタン火災のための変更イベントがとき

あなたはすべての画像を更新する必要があります。無線入力の元のコレクションへの参照はradiosに保存されています（これがより効率的です）。 <label>のいずれかがクリックされると、イベントハンドラが起動します。ハンドラの内部でfilter()を使用してradiosコレクションをチェックされたラジオとチェックされていないラジオ入力に分離します。

の作業のデモ：http://jsbin.com/ibaqid/2/edit#javascript,live

Answer 4

これは動作するはずです：

<label for="radio1"> 
    <img src="radio_unchecked.png" style="vertical-align:middle" /> 
    <input name="radiogroup" type="radio" id="radio1" style="display:none;"> 
</label> 

<label for="radio2"> 
    <img src="radio_unchecked.png" style="vertical-align:middle" /> 
    <input name="radiogroup" type="radio" id="radio2" style="display:none;"> 
</label> 

<script> 
$(document).ready(function(){ 

    $("input[name=radiogroup]").change(function() { 
     $("input[name=radiogroup]").prev().attr("src", "radio_unchecked.png"); 
     $(this).prev().attr("src", "radio_checked.png"); 
    }); 
}); 

</script>