JQuery checkbox filter parameter

Question

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

And you're not getting any errors, like click is not defined, from the line unbind(click) where you're missing the quotes. — adeneo
– adeneo, Commented Jan 29, 2016 at 13:12
Oh sometimes answer is simple like that. I didn't know i have to use quotes for events. Thanks for your attention. — kenarsuleyman
– kenarsuleyman, Commented Jan 29, 2016 at 13:15
Is there some reason you are unbinding before binding here? Seems odd that. — Mark Schultheiss
– Mark Schultheiss, Commented Jan 29, 2016 at 13:23
If i don't do that click event double firing and checkbox value not changing. I dont know why. — kenarsuleyman
– kenarsuleyman, Commented Jan 29, 2016 at 13:31
AH my bad I should have noted the loop on the class. Adjusted my answer based on that to fix that also — Mark Schultheiss
– Mark Schultheiss, Commented Jan 29, 2016 at 13:50

AsgarAli · Accepted Answer · 2016-01-29 13:50:11Z

2

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

    }

});

edited Jan 29, 2016 at 13:50

answered Jan 29, 2016 at 13:16

AsgarAli

2,2092 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kenarsuleyman Over a year ago

Thanks so much i will accept this as answer in 7 minutes :)

kenarsuleyman Over a year ago

Yeah working but i have a problem the if condination not working it is always add "?tur=" to like this "site.com/?tur=a?tur=b" instead of "?tur=a+b"

Mark Schultheiss Over a year ago

I would probably bind this to the genres using #genres as the selector instead of document here.

kenarsuleyman Over a year ago

Will it any effect to url ? That seems simple to me if i bind to genres it will behind 2 elements this way only 1 element.

Mark Schultheiss · Accepted Answer · 2016-01-29 13:57:29Z

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

Collectives™ on Stack Overflow

JQuery checkbox filter parameter

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related