Reputation: 1030
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
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
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