Параметры фильтра флажка JQuery

Question

У меня есть список флажков для жанровых фильтров. Вот 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> 

На Флажок Нажмите я хочу добавить genrename в конце url.Here мой JQuery код

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

«тур» означает жанр на моем языке. (Для вас может понять url.) Эта функция находится под документом ready.Checking функции работают, но я не могу видеть окно предупреждения при щелчке. Я попытался использовать режим инкогнито для кешей, ничего не изменилось. Что такое проблема Большое спасибо

Answer 1

Это может быть гораздо проще, исправить некоторые проблемы синтаксиса и проблемы с подстроки злоупотребляют и должны использовать str.indexOf(searchValue[, fromIndex]) вместо этого.

примечание я использовал .data нет .attr как лучший способ здесь. !$(this).is(":checked") также может быть !$(this)[0]checked или даже !this.checked

EDIT: Adjust для связывания проблему путем удаления класса

$('#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"); 
    } 
}); 

Обратите внимание, что вы могли бы также сделать: (но лучше спорно)

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

Answer 2

Всякий раз, когда вы хотите играть с флажком, любезно используйте событие .change() вместо .click().

Вы можете установить или снять флажок с помощью клавиши Ctrl + SpaceBar. Событие .click() не будет запущено.

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

    } 

});