Снятие галочек с других checkbox-ов по условию

304

15 июня 2017, 04:17

Есть три чекбокса.
Нужно сделать так, чтобы если активен первый чекбокс, то убирались галочки со второго и третьего, а если второй или третий активный - убиралась галочка с первого.

Вот что у меня получилось:

$('.food_in_tour input:checkbox').change(function() { 
  if ($('#eat_all').prop('checked')) { 
    if ($('#not_meat').prop('checked') || $('#not_sugar').prop('checked')) { 
      $('.food_in_tour input:checkbox:not(#eat_all)').prop('checked', false); 
    } 
  } else if ($('#not_meat').prop('checked') || $('#not_sugar').prop('checked')) { 
    if ($('#eat_all').prop('checked')) { 
      $('#eat_all').prop('checked', false); 
     } 
  } 
});

<div class="food_in_tour"> 
    <label class="checkbox_custom"> 
      <input type="checkbox" name="food" value="eat_all" id="eat_all"> 
      <span>Ем все</span> 
    </label> 
    <label class="checkbox_custom"> 
      <input type="checkbox" name="food" value="not_meat" id="not_meat" > 
      <span>Не употребляю мясо</span> 
    </label> 
    <label class="checkbox_custom"> 
      <input type="checkbox" name="food" value="not_sugar" id="not_sugar"> 
      <span>Не ем сладкое</span> 
    </label> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

В чем ошибка, и как это можно реализовать?

Answer 1

Нужно проверять какой checkbox был нажат, а не состояние checkbox-ов после нажатия.
Если нажали на #eat_all, то убираем выделение с других checkbox-ов. Если нажали на какой-то другой - убираем с #eat_all.
Проверку можно делать, например, с помощью ID checkbox-a:

$('.food_in_tour :checkbox').change(function() { 
    if (this.id == "eat_all") { 
        $('.food_in_tour :checkbox:not(#eat_all)').prop("checked", false); 
    } 
    else { 
        $("#eat_all").prop("checked", false); 
     } 
});

<div class="food_in_tour"> 
    <label class="checkbox_custom"> 
      <input type="checkbox" name="food" value="eat_all" id="eat_all"> 
      <span>Ем все</span> 
    </label> 
    <label class="checkbox_custom"> 
      <input type="checkbox" name="food" value="not_meat" id="not_meat" > 
      <span>Не употребляю мясо</span> 
    </label> 
    <label class="checkbox_custom"> 
      <input type="checkbox" name="food" value="not_sugar" id="not_sugar"> 
      <span>Не ем сладкое</span> 
    </label> 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>