JQuery не сняв флажок флажок

Question

$('input[type="checkbox"]').change(function() { 
 
    var number = []; 
 
    $('input[type="checkbox"]:checked').each(function() { 
 
    number.push($(this).val()); 
 
    }); 
 
    if (number.length == 0) { 
 
    $('.category1').prop('checked', true); 
 
    loaddata(); 
 
    } else if ($('#all').checked && number.length != 8) { 
 
    alert('it executed'); 
 
    $('#all').attr('checked', false); 
 
    loaddata(); 
 
    } else { 
 
    loaddata(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="expander-list" id="category"> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" id="all" class="category1">all</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="electronics" class="category1">Electronics</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="kitchen" class="category1">Kitchen</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="decoratives" class="category1">Decoratives/Interior</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="homedecor" class="category1">Home Decor</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="furnitures" class="category1">Furnitures</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="toys" class="category1">Toys</label> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div class="radio" style="padding-left:0px"> 
 
     <label> 
 
     <input type="checkbox" name="filter[]" value="vehicles" class="category1">Vehicles</label> 
 
    </div> 
 
    </li> 
 
</ul>

Меня беспокоит очень просто. нажав на все jQuery, выберете все флажки, но если один из них не отмечен, все флажки должны быть сняты. но он не снимает флажок для всех флажков даже в моем случае, если условие не выполняется, и это не предупреждает меня. Как его решить и заблаговременно.

Answer 1

Это, как я хотел бы сделать это:

$('input[type="checkbox"]').change(function() { 
    var unchecked_flag = false; 

    $('input[type="checkbox"]').slice(1).each(function() { 
    if ($(this).prop("checked") == false) { 
     unchecked_flag = true; 
    } 
    }); 

    if (unchecked_flag) { 
    $("#all").prop("checked", false); 
    } else { 
    $("#all").prop("checked", true); 
    } 
}); 

$("#all").click(function() { 
    $('input[type="checkbox"]').prop("checked", true); 
}); 

Here is the JSFiddle demo

Answer 2

1. заявление $('#all').checked не возвращает то, что вы ожидаете.
   Чтобы получить checked собственность вам нужно $('#all').prop('checked')

2. упускают разницу между .prop() и .attr().
   первый получает текущее свойство checked, второй возвращает атрибут checked (статически определенный на странице HTML).
   Избегайте использования .attr(), если вы ищете текущее состояние флажка.

Попробуйте с этим фрагментом:

$('input[type="checkbox"]').change(function() { 
     var number = []; 
     $('input[type="checkbox"]:checked').each(function() { 
      number.push($(this).val()); 
     }); 
     if (number.length == 0) { 
      $('.category1').prop('checked', true); 
      loaddata(); 
     } else if ($('#all').prop('checked') && number.length !== 8) { 
      alert('it executed'); 
      $('#all').prop('checked', false); 
      loaddata(); 
     } else { 
      loaddata(); 
     } 
    }); 

Смотрите также jQuery docs

Answer 3

Здравствуй В соответствии с вашими требованиями, я думаю, что ниже скрипка будет решить вашу проблему попробовать эту надежду, что помогает вам.

Я сделал это как «все» и «единый» флажок для вашего help.you может выбрать задачу, что вы хотите ..

** ваш JQuery будет что-то вроде ниже ..

<script> 
$("#all").change(function() { 
$("input:checkbox").prop('checked', $(this).prop("checked"));  
}); 
$(".category1").click(function() { 
if($(this).prop("checked") == false) 
{ 
$(".category1").attr("checked", false); 
$("#all").attr("checked", false); 
}; 
}); 
</script> 

Попробуйте ниже Fiddle

Checkbox select Fiddle Demo