firasKoubaa firasKoubaa - 2 months ago 8
CSS Question

JQuery : How to force the click of s specific item of a radiobox

i have a page which contains a radio box , and where , items are identified by their diffrent numric ids ; i'm recupering the id of the item that should be clicked from another job , and i wanna force the click of that specific item :

This is my HTML page :

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


As you can see , i have the labels (itmes ) with the ids : 1,2,3

i have a function which is loadin dynamically the id which must be checked :

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


i wann develop a function which catch that "id_cat" and force the click (the event & the appearence ) on the item of the specific id received

so i started
by that :


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

}
}


But it didn't work , any suggestions ?

Answer

Please remove "checkSelectedCategory" function and add following code in if condition.

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

Please check below snippet. Whichever value will be entered from 1,2,3 that radio button will be checked and click event also trigger on it onchange event of input type="text".

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

Comments