Question

  <div class="col-6 col-md-3">
  <p class="orange OldStandard"> Menu Filters</p>
  <input type="button" class="check" value="Select All"/>
  <input type="button" class="uncheck" value= "Unselect All"/>
  <br>
        <input type="checkbox" id="vegan" checked/> <label for="vegan">Vegan</label>
        <br/>
        <input type="checkbox" id="vegetarian" checked/> <label for="vegetarian">Vegetarian</label>
        <br/>
        <input type="checkbox" id="pescetarian" checked/> <label for="pescetarian">Pescetarian</label>
         <br/>
        <input type="checkbox" id="dairy-free" checked/> <label for="dairy-free">Dairy-free</label>
         <br/>
        <input type="checkbox" id="egg-free" checked/> <label for="egg-free">Egg-free</label>
         <br/>
        <input type="checkbox" id="fish-free" checked/> <label for="fish-free">Fish-free</label>
         <br/>
        <input type="checkbox" id="shellfish" checked/> <label for="shellfish">Shellfish-free</label>
          <br/>
        <input type="checkbox" id="tree" checked/> <label for="tree">Tree nut-free</label>
          <br/>
        <input type="checkbox" id="peanut" checked/> <label for="peanut">Peanut-free</label>
          <br/>
        <input type="checkbox" id="soy" checked/> <label for="soy">Soy-free</label>
          <br/>
        <input type="checkbox" id="total-fat" checked/> <label for="total-fat">Low Total Fat</label>
          <br/>
        <input type="checkbox" id="saturated-fat" checked/> <label for="saturated-fat">Low Saturated Fat</label>
          <br/>
        <input type="checkbox" id="cholesterol" checked/> <label for="cholesterol">Low Cholesterol</label>
          <br/>
        <input type="checkbox" id="sodium" checked/> <label for="sodium">Low Sodium</label>
          <br/>
        <input type="checkbox" id="protein" checked/> <label for="protein">Protein >25g</label>
          <br/>
        <input type="checkbox" id="calories" checked/> <label for="calories">Calories  <450 calories</label>
  <br>

  </div>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function() {
    $('.check').click(function (){
        $('input[type="checkbox"]').attr("checked", "checked");
    });
    $('.uncheck').click(function (){
        $('input:checkbox').removeAttr('checked');
    });
});
</script>

这是我的代码，它包含许多食物选择，现在当你第一次进入页面时它们都被预选，你可以选择取消选择或全部选择，我的取消选择完全正常，但我的选择全部不起作用在所有情况下，我尝试了不同的方式，例如上面的方法和： $('input:checkbox').attr("checked", "checked");但它仍然没有用。有人可以帮忙吗？

Answer 1

要解决此问题，请使用prop('checked', true)代替attr()，prop('checked', false)代替removeAttr()：

＆＃13;

$('.check').click(function() {
  $('input[type="checkbox"]').prop("checked", true);
});

$('.uncheck').click(function() {
  $('input:checkbox').prop("checked", false);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="col-6 col-md-3">
  <p class="orange OldStandard"> Menu Filters</p>
  <input type="button" class="check" value="Select All" />
  <input type="button" class="uncheck" value="Unselect All" /><br>
  
  <input type="checkbox" id="vegan" checked/> <label for="vegan">Vegan</label><br/>
  <input type="checkbox" id="vegetarian" checked/> <label for="vegetarian">Vegetarian</label><br/>
  <input type="checkbox" id="pescetarian" checked/> <label for="pescetarian">Pescetarian</label><br/>
  <input type="checkbox" id="dairy-free" checked/> <label for="dairy-free">Dairy-free</label><br/>
  <input type="checkbox" id="egg-free" checked/> <label for="egg-free">Egg-free</label><br/>
  <input type="checkbox" id="fish-free" checked/> <label for="fish-free">Fish-free</label><br/>
  <input type="checkbox" id="shellfish" checked/> <label for="shellfish">Shellfish-free</label><br/>
  <input type="checkbox" id="tree" checked/> <label for="tree">Tree nut-free</label><br/>
  <input type="checkbox" id="peanut" checked/> <label for="peanut">Peanut-free</label><br/>
  <input type="checkbox" id="soy" checked/> <label for="soy">Soy-free</label><br/>
  <input type="checkbox" id="total-fat" checked/> <label for="total-fat">Low Total Fat</label><br/>
  <input type="checkbox" id="saturated-fat" checked/> <label for="saturated-fat">Low Saturated Fat</label><br/>
  <input type="checkbox" id="cholesterol" checked/> <label for="cholesterol">Low Cholesterol</label><br/>
  <input type="checkbox" id="sodium" checked/> <label for="sodium">Low Sodium</label><br/>
  <input type="checkbox" id="protein" checked/> <label for="protein">Protein >25g</label><br/>
  <input type="checkbox" id="calories" checked/> <label for="calories">Calories  &lt; 450 calories</label><br>
</div>

＆＃13;

另请注意，您应该使用<，<的HTML字符实体，这样它就不会干扰您的HTML。

选中全部为复选框不起作用

1 个答案: