使用jQuery選擇隱藏的單選按鈕，但onclick不工作

我使用jQuery來隱藏我的網站上的實際單選按鈕，並用圖像（自定義單選按鈕）替換它們。 jQuery允許用戶單擊圖像，該圖像依次「選擇」隱藏的單選按鈕。實際的單選按鈕在html代碼中附有onclick事件，但當我通過圖像（jQuery）「選擇」一個單選按鈕時，實際的單選按鈕不會檢測到選擇，因此onclick事件不是活性。使用jQuery選擇隱藏的單選按鈕，但onclick不工作

我可以確認onclick事件腳本在使用默認單選按鈕（無jQuery）時工作;當我使用jQuery作爲自定義單選按鈕時它不起作用。這是我到目前爲止的代碼：

HTML代碼

<div class="prettyRadiobuttons clearfix"> 
<ul id="store"> 

<li><input name="store" type="radio" id="store_1" value="store_1" onclick="dynamic_Select('code.php', this.value)" /> 
<label for="store_1">Store 1</label></li> 

<li><input name="store" type="radio" id="store_2" value="store_2" onclick="dynamic_Select('code.php', this.value)" /> 
<label for="store_2">Store 2</label></li> 

</ul> 
</div>

的jQuery（自定義單選按鈕）

$(document).ready(function() { 
     //Adds the "radiolist" class to the div containing the radio buttons 
     $("div.prettyRadiobuttons").addClass("radiolist"); 

     //Adds the html for the custom radio button (image) to each radio button (li) 
     $("div.radiolist li").append('<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>'); 

     //Handles selecting a radio button 
     $(".radiolist .radio-select").click(
      function(event) { 
       event.preventDefault(); 
       var $boxes = $(this).parent().parent().children(); 
       $boxes.removeClass("selected"); 
       $(this).parent().addClass("selected"); 
       $(this).parent().find(":radio").attr("checked","checked"); 
      } 
     ); 

     //Handles de-selecting a radio button 
     $(".radiolist .radio-deselect").click(
      function(event) { 
       event.preventDefault(); 
       $(this).parent().removeClass("selected"); 
       $(this).parent().find(":radio").removeAttr("checked"); 
      } 
     ); 
    });

不同類別的jQuery的用於分配不同的圖像通過CSS根據是否選擇單選按鈕。

jQuery代碼無需使用onclick事件，onclick事件可以在不使用jQuery的情況下工作，但是我無法讓它們一起工作。任何幫助將非常感激！

來源

2012-01-05 Stone

只需在某處添加一個「.click（）」。

$(this).parent().find(":radio").click().attr("checked","checked");

而且

$(this).parent().find(":radio").click().removeAttr("checked");

注意我設置保存在連續改變它兩倍的屬性之前這樣做。

來源

2012-01-05 02:00:37 SpoonNZ

這並不完全清楚，我的問題是什麼，但我有幾個建議：

使用點擊（）的代替ATTR（「選中」，「選中」） - 效果將是相同的（收音機將被選中），並且onclick處理程序將被調用;或者：
直接調用dynamic_Select直接在jQuery代碼上。

來源

2012-01-05 02:01:23 mgibsonbr

在無線電輸入的父級上切換類。（label.radio）可以說你想用這個label.radio來替代一些可以在IE9/10中工作的CSS3樣式。您可能也想要在動態插入的內容上啓用此功能，然後您應該將點擊綁定到文檔。你還想在廣播組中取消選中其他電臺的父母。

首先在docready設置的初始狀態：

$('input[type="radio"]:checked').closest('.radio').addClass('checked'); 
$('input[type="radio"]:disabled').closest('.radio').addClass('disabled');

然後click事件：

$(document).on('click','input[type="radio"]', function(){  
    var name = $(this).attr('name');   
    $('input:radio[name="'+name+'"]').closest('.radio').removeClass('checked');   
    if($(this).prop('checked')){ 
     $(this).closest('.radio').addClass('checked');  
    } 
});

HTML示例：

<div class="radio-group">    

    <label class="radio"> 
     <input type="radio" name="henk" value="Yes" checked="checked"> 
     <span>Abracadabra</span> 
    </label> 

    <label class="radio"> 
     <input type="radio" name="henk" value="Yes" disabled="disabled" > 
     <span>Abracadabra.</span> 
    </label> 

    <label class="radio"> 
     <input type="radio" name="henk" value="Yes" > 
     <span>Simsalabim</span> 
    </label> 

</div>

我對小提琴加入了full example。

來源

2013-10-10 14:07:56 Plippie

使用jQuery選擇隱藏的單選按鈕，但onclick不工作

回答

相關問題