Как скрыть метки непроверенных флажков?

ProgramBox

Как скрыть метки непроверенных флажков?

Post author:admin
Запись опубликована:22 февраля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Мне нужно скрыть флажки и их метки, когда флажки не установлены.

 // this works for checkboxes:
//$("input:checkbox").not(":checked").hide();

// ERROR: this hides all labels
$("input:checkbox").not(":checked").parent().find('label').hide();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label> 

<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
    
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label> 
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
    
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label> 
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

Ответ №1:

Используйте .prev() этот select для предыдущего родственного элемента. Также вы можете использовать :not() .not() метод selecot вместо этого.

 $("input:checkbox:not(:checked)").prev().hide();

Показать фрагмент кода

 $("input:checkbox:not(:checked)").hide().prev().hide();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label>
<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label>
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label>
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

Если label это не предыдущий input аналог, вы можете выбрать целевую метку, используя атрибут Equals Selector [name=”value”] . Как вы знаете id , input равен for атрибуту label .

 $("input:checkbox:not(:checked)").each(function(){
    $(this).hide().siblings("label[for='"  this.id  "']").hide();
});

Показать фрагмент кода

 $("input:checkbox:not(:checked)").each(function(){ 
    $(this).hide().siblings("label[for='"  this.id  "']").hide();
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label>
<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label>
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label>
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

1. Хотя prev это самый простой и быстрый, это не лучший подход. Это зависит от неизменной структуры DOM и отношения, подразумеваемого порядком элементов DOM. Если этот порядок изменится, этот код начнет автоматически завершаться сбоем, потенциально скрывая неправильный элемент. Лучшим решением является то, которое использует реальную существующую семантическую связь между меткой и ее вводом, определяемым for атрибутом метки. Решения, использующие поиск меток $("label[for=" ... "])" , являются лучшими решениями для удобства обслуживания и просто корректности.

2. @meagar Хорошее упоминание.

Ответ №2:

prev() : получает непосредственно предшествующий родственный каждому элементу в наборе сопоставленных элементов. Если указан селектор, он извлекает предыдущий аналог, только если он соответствует этому селектору.

Вы могли бы использовать prev() для выбора предыдущего label , передав "label" в качестве параметра :

 $('input:checkbox:not(:checked)').hide().prev('label').hide();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label> <input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label> <input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label> <input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

Надеюсь, это поможет.

Ответ №3:

Вы можете использовать эту функцию.

С помощью этой функции не имеет значения, где расположена метка. Единственное, что важно, это использовать id атрибут для вашего флажка и for атрибут для вашей метки.

 $(function() {
  $('input:checkbox:not(:checked)').each(function() {
    $(this).hide();
    $('label[for=' $(this).attr('id') ']').hide();
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkbox57ff95614668d">Sport</label>
<input class="" id="checkbox57ff95614668d" type="checkbox" name="userhobby[]" value="1" checked="">
<label class="checkbox-inline" for="checkbox57ff9561466d3">cinéma</label>
<input class="" id="checkbox57ff9561466d3" type="checkbox" name="userhobby[]" value="2" checked="">
<label class="checkbox-inline" for="checkbox57ff956146712">lecture</label>
<input class="" id="checkbox57ff956146712" type="checkbox" name="userhobby[]" value="3">

1. К сожалению, сейчас это лучший ответ, но он накопил несколько отрицательных голосов, прежде чем был отредактирован, чтобы быть правильным.

2. @meagar Ну, отрицательные голоса в моем первом ответе были правильными… код не сработал. Пользователи, проголосовавшие за удаление, не увидят редактирование (если они не вернутся к вопросу). Я это понимаю. Для меня это не проблема 🙂

Ответ №4:

Вы можете использовать идентификатор флажка, чтобы помочь в фильтрации:

 $('input:checkbox').not(':checked').each(function(i, el){ 
    $(el).parent().find('label[for="'   el.id   '"]').hide(); 
});

Или, если вы хотите что-то более надежное и независимое от структуры:

 $('input:checkbox').not(':checked').each(function(i, el){ 
    $('label[for="'   el.id   '"]').hide(); 
});

1. Намного лучше, чем использование prev , но оно по-прежнему зависит от структуры DOM, не меняющейся со временем. В первый раз, когда приходит дизайнер и добавляет a <div> вокруг флажка, чтобы они могли добиться какого-то внешнего стиля, этот код сломается.