JQuery：ラジオボックスの特定のアイテムのクリックを強制的に行う方法

Question

私はラジオボックスを含むページを持っています。また、項目はそれぞれ異なる番号で識別されます。私は別のジョブからクリックする必要があるアイテムのIDをrecuperingいる、と私はその特定の項目のクリックを強制したい：

これは私のHTMLページです：

<div id="radioCategories" class="select-list__content toggle-box" id="toggle-list-categories"> 
    <label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer"> 
     <input class="filtres" name="categorieFiltre" type="radio" id="1"> 
     <span class="check"></span> 
     <span class="checkbox-title" data-match-forcontent="name"></span> 
     <span>(<span data-match-forcontent="nbMission"></span>)</span> 
    </label> 


    <label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer"> 
     <input class="filtres" name="categorieFiltre" type="radio" id="2"> 
     <span class="check"></span> 
     <span class="checkbox-title" data-match-forcontent="name"></span> 
     <span>(<span data-match-forcontent="nbMission"></span>)</span> 
    </label> 


    <label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer"> 
     <input class="filtres" name="categorieFiltre" type="radio" id="3"> 
     <span class="check"></span> 
     <span class="checkbox-title" data-match-forcontent="name"></span> 
     <span>(<span data-match-forcontent="nbMission"></span>)</span> 
    </label> 


</div> 

をすることができますように私はIDを持つラベル（itmes）を持って、次を参照してください。1,2,3

私は、動的にチェックされなければならないIDのLoadinれる機能があります。

if (GetParams("cat_id")) { 
    var id_cat = GetParams("cat_id"); // can be 1 or 2 or 3 
} 

を

私はので、私はそれによって を開始しました「id_cat」と、特定のIDの項目をクリックし（イベント& appearence）を強制が

を受け取ったことをキャッチする機能を開発wann：

checkSelectedCategory: function(id_cat) { 
    if (id) { 
    $("#radioCategories input:radio").attr(id, id_cat).click(function() { 
     alert("clicked"); 
    }); 
    $("input:radio:first").prop("checked", true).trigger("click"); 

    } 
} 

しかし、それは動作しませんでした何か提案はありますか？

Answer 1

のようなイベントをトリガcheckSelectedCategory方法で、この

$("#radioCategories input[type='radio']").click(function() { 
         alert("clicked"); 
        }); 

などのラジオボタンにイベントを添付します。

if (GetParams("cat_id")) { 
    var id_cat = GetParams("cat_id"); // can be 1 or 2 or 3 
    var _this = $("#"+id_cat); 
    _this.prop("checked", true); 
    _this.trigger("click"); 
} 

以下のスニペットを確認してください。いずれの値も1,2,3から入力され、ラジオボタンがチェックされ、イベントをクリックすると、input type = "text"のonchangeイベントが発生します。

$(document).ready(function(){ 
 
    $("#dynamic_cat").on('change',function(){ 
 
    var id_cat = $(this).val(); 
 
    if (id_cat) { 
 
     var _this = $("#"+id_cat); 
 
     _this.prop("checked", true); 
 
     _this.trigger("click"); 
 
    } 
 
    }); 
 
    $("input[type='radio']").click(function(){ 
 
    alert("clicked"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="textbox" id="dynamic_cat" value=""/><br/> 
 

 
<div id="radioCategories" class="select-list__content toggle-box" id="toggle-list-categories"> 
 
    <label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer"> 
 
    <input class="filtres" name="categorieFiltre" type="radio" id="1"> 
 
    <span class="check"></span> 
 
    <span class="checkbox-title" data-match-forcontent="name"></span> 
 
    <span>(<span data-match-forcontent="nbMission"></span>)</span> 
 
    </label> 
 

 

 
    <label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer"> 
 
    <input class="filtres" name="categorieFiltre" type="radio" id="2"> 
 
    <span class="check"></span> 
 
    <span class="checkbox-title" data-match-forcontent="name"></span> 
 
    <span>(<span data-match-forcontent="nbMission"></span>)</span> 
 
    </label> 
 

 

 
    <label class="checkbox base-bloc" data-match-for="categoriemissionfreelancer"> 
 
    <input class="filtres" name="categorieFiltre" type="radio" id="3"> 
 
    <span class="check"></span> 
 
    <span class="checkbox-title" data-match-forcontent="name"></span> 
 
    <span>(<span data-match-forcontent="nbMission"></span>)</span> 
 
    </label> 
 
</div>

Answer 2

は「checkSelectedCategory」機能を削除した状態であれば、次のコードを追加してください。この

checkSelectedCategory:function (id_cat) { 
      if (id_cat){ 

       $("input#"+id_cat).trigger("click"); 

      } 
     } 

Answer 3

あなたが実際にそれをクリックする必要がありますか？ JSでそれを選択するだけですか？あなたはラジオボタンをチェックし取得したいid_catに基づいて

var id_cat = 2; 
 
var id  = '#' + id_cat; 
 

 
// Simply select it. 
 
$(id).prop('checked', true); 
 

 
// Or, select it by click. 
 
$(id).trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    1 
 
    <input type="radio" id="1"> 
 
</label> 
 

 
<label> 
 
    2 
 
    <input type="radio" id="2"> 
 
</label> 
 

 
<label> 
 
    3 
 
    <input type="radio" id="3"> 
 
</label>