CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
kenarsuleyman
kenarsuleyman

Reputation: 1030

JQuery checkbox filter parameter

I have list of checkboxes for genre filters. Here is HTML

<div class="gl-title">Türler</div>
<ul class="check-list filters" id="genres">
  <?php foreach($genres as $genre){?>
    <li>
      <div class="customCheck">
        <input type="checkbox" data-genrename="<?php echo $genre->slug; ?>" id="tur_<?php echo $genre->term_id;?>">
        <label for="tur_<?php echo $genre->term_id;?>"></label>
      </div>
      <div class="cl-text">
        <?php echo $genre->name;?>
      </div>
    </li>
    <?php }?>
</ul>
</div>

On checkbox click i want to add genrename at the end of the url.Here is my JQuery code

$(".customCheck").children("input").unbind(click).click(function(){
    if ($(this).is(":checked")) {
        $(this).prop("checked", false);
    } else {
        $(this).prop("checked", true);
    }
    alert("blabla");
    var curUrl = window.location.href;
    alert(curUrl);

    if(curUrl.substring("?tur=")>-1){
        window.location=curUrl+"+"+$(this).attr("data-genrename");
    }else{
        window.location=curUrl+"?tur="+$(this).attr("data-genrename");
    }
});

"tur" means genre in my language.(For you can understand url.) This function is under document ready.Checking functions are working but i can't see alert box on click. I tried with incognito mode for caches nothing changed. What is problem Thanks so much

Upvotes: 2

Views: 613

Answers (2)

Mark Schultheiss
Mark Schultheiss

Reputation: 34227

This can be much simpler, fix some syntax issues and an issue with substring being misused and should use str.indexOf(searchValue[, fromIndex]) instead.

Note I used .data not .attr as the better method here. !$(this).is(":checked") can also be !$(this)[0]checked or even !this.checked

EDIT: Adjust for binding issue by removal of class

$('#genres').on("change", "input[type='checkbox']", function() {
  // set checkbox to what it is NOT (checked or unchecked (not sure why)
  $(this).prop("checked", !$(this).is(":checked"));
  alert("blabla");
  var curUrl = window.location.href;
  alert(curUrl);
  var turp = "?tur=";
  if (curUrl.indexOf(turp) > -1) {
    window.location = curUrl + "+" + $(this).data("genrename");
  } else {
    window.location = curUrl + turp + $(this).data("genrename");
  }
});

Note that you could also do: (but which is better is debatable)

var curUrl =  (window.location.href.indexOf(turp) > -1) window.location.href + '+': window.location.href+"?tur=";
window.location = curUrl + $(this).data("genrename");

Upvotes: 1

AsgarAli
AsgarAli

Reputation: 2211

Whenever you want to play with check-box, kindly always use .change() event instead of .click().

You can make check-box checked or unchecked using Ctrl + SpaceBar key at that time .click() event will not be fired.

 $(document).on("change", ".customCheck :checkbox", function() {
    if ($(this).is(":checked")) {
        $(this).prop("checked", false);
    }
    else {
        $(this).prop("checked", true);
    }
    alert("blabla");
    var curUrl = window.location.href;
    alert(curUrl);

    if (curUrl.substring("?tur=") > -1) {
        window.location = curUrl + "+" + $(this).attr("data-genrename");
    }
    else {
        window.location = curUrl + "?tur=" + $(this).attr("data-genrename");

    }

});

Upvotes: 2

Related Questions