jQuery自定義單選按鈕不能用作單選按鈕

我正在使用JQuery和自定義單選按鈕的自定義圖像。現在，它將作爲複選框工作。我需要它作爲收音機工作。jQuery自定義單選按鈕不能用作單選按鈕

當我點擊兩個收音機中的任何一個時，它們都將被打勾而不是一次一個。我錯過了什麼嗎？

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"); 
     } 
    }); 

});

來源

2012-01-12 Satch3000

你沒有點擊操作的圖片，我不知道你能怎麼連檢驗的任何功能時，單選按鈕通過'隱藏顯示：無;'？變化事件從不會發生，是嗎？ \\編輯：哦，我知道，標籤當然會觸發單選按鈕。 – Connum 2012-01-12 12:43:15

@Connum：「img」位於單選按鈕的「標籤」內，因此點擊就會到達標籤，就像點擊單選按鈕一樣。 – 2012-01-12 12:48:06

單選按鈕正常工作（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或更早）和CSS3 adjacent sibling combinator，你完全可以用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); 
}

來源

2012-01-12 12:43:01

對於CSS解決方案爲+1。太好了！ :) – PPvG 2012-01-12 13:10:03

@PPvG：謝謝！是的，它適用於幾乎所有的現代瀏覽器，但可惜不在IE8中，這意味着「在野外」使用它仍然有一些方法。儘管希望很快！ – 2012-01-12 14:07:36

-2

嘗試更換：

this.checked

與此：

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

來源

2012-01-12 12:36:43

不，輸入的原始DOM元素的checked屬性是完全可靠的跨瀏覽器。 – 2012-01-12 12:37:19

更改爲：如果$（this）.is（'：checked'）{並且它停止工作...也嘗試沒有「if」而沒有成功 – Satch3000 2012-01-12 12:44:21

的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

來源

2012-01-12 12:45:01 PPvG

這應該工作：

<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>

來源

2012-01-12 12:55:00 Connum

jQuery自定義單選按鈕不能用作單選按鈕

回答

相關問題