jQueryを使用して非表示のラジオボタンを選択してもオンクイックが動作しない

Question

jQueryを使用して、私のウェブサイトの実際のラジオボタンを隠し、イメージ（カスタムラジオボタン）で置き換えます。 jQueryを使用すると、ユーザーは画像をクリックして、隠しラジオボタンを「選択」することができます。実際のラジオボタンにはHTMLコードのonclickイベントが添付されていますが、画像（jQuery）を使用してラジオボタンを選択すると、実際のラジオボタンは選択を検出しないため、onclickイベントは表示されません活性化される。

デフォルトのラジオボタン（jQueryなし）を使用しているときにonclickイベントスクリプトが動作することを確認できます。カスタムラジオボタンに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を使用せずに動作しますが、両方とも一緒に動作させることはできません。どんな助けでも大歓迎です！

Answer 1

「.click（）」をどこかに追加するだけです。

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

そして

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

私は2回連続で、それを変更保存する属性を設定する前にそれをやっている注意してください。

Answer 2

それはあなたの問題が何であるか私には全く明らかではないが、私はいくつかの提案があります：代わりにのattrの

1. 使用クリック（）（ "確認"、 "確認"） - エフェクトは同じになり（ラジオが選択されます）、onclickハンドラが呼び出されます。または：

2. dynamic_SelectをjQueryコードで直接呼び出します。

Answer 3

ラジオ入力の親クラスを切り替えるには。 （label.radio）では、このlabel.radioをIE9/10でも動作するCSS3スタイリングでスタイルしたいと言っています。おそらく、動的に挿入されたコンテンツでこれを有効にしたい場合は、クリックしてドキュメントにバインドする必要があります。ラジオグループ内の他のラジオの親の「チェックを外す」ことも望みます。クリックイベントのために次に

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

：

$(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を追加docready初

は、初期状態を設定します。