Блог

Главная - Вопросы по программированию - Как создать кнопку «только» для меню флажков?

Как создать кнопку «только» для меню флажков?

#jquery #html

#jquery #HTML

Вопрос:

Я пытаюсь создать кнопку «только» для меню флажков, которая снимала бы все флажки (в каждом меню), кроме ближайшего флажка. введите описание изображения здесь

У меня есть некоторый код, который работает, но это своего рода хак, и вместо этого я хотел бы сказать в 1 строке что-то вроде:

  • если $(this).closest(‘.checkbox’).find(‘input’) checked , то снимите флажок, иначе оставьте как есть

Кроме того, мне нужно, чтобы событие запускалось при фактическом нажатии пользователя (это с triggerHandler )?

 $('.only').on('click', function() {

   $(this).closest('.checkbox').find('input').prop('checked', false);
   $(this).closest('.row').find('input').prop('checked', true);
   $(this).closest('.checkbox').find('input').prop('checked', false);
   $(this).closest('.row').find('input').trigger('click');
});  
 .only {
  border: 1px solid rgb(115, 135, 156);
  float: right;
  border: 1px;
  border-radius: 5px;
  padding-right: 7px;
  padding-left: 7px;
}  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
                    <div class="row">
                      <div class="right">
                        <div class="only">only</div>
                      </div>
                    <label>
                        <input name="countryOriginMenu" value="Not provided" checked="checked" type="checkbox">
                         <span>Frist</span>
                     </label>
                    </div>
                    <div class="row">
                      <div class="right">
                        <div class="only">only</div>
                      </div>
                    <label>
                        <input name="countryOriginMenu" value="Not provided" checked="checked" type="checkbox">
                         <span>Second</span>
                     </label>
                    </div>
                    <div class="row">
                      <div class="right">
                        <div class="only">only</div>
                      </div>
                    <label>
                        <input name="countryOriginMenu" value="Not provided" checked="checked" type="checkbox">
                         <span>Third</span>
                     </label>
                    </div>
                  
</div>

https://jsfiddle.net/2m0cu795 /:

Ответ №1:

Вы запускаете неправильное событие, используйте изменение, чтобы удалить дублирующуюся строку. ПРИМЕЧАНИЕ: ЕСЛИ вы нажмете «щелчок», это изменит значение, а «изменить» — нет.

 $('.only').on('click', function() {
  $(this).closest('.checkbox').find('input[type="checkbox"]').prop('checked', false);
  $(this).closest('.row').find('input[type="checkbox"]').prop('checked', true).trigger('change');
});

С другой стороны, вы НЕ можете изменить текущее значение, независимо от его значения (ЕДИНСТВЕННОГО) с:

 $('.only').on('click', function() {
  var cb = $(this).closest('.checkbox').find('input[type="checkbox"]');
  var me = $(this).closest('.row').find('input[type="checkbox"]');
  cb.not(me).prop('checked', false);
  me.trigger('change');
});

ИЛИ выполните триггер для ДРУГИХ флажков: (поскольку они меняются)

 cb.not(me).prop('checked', false).trigger('change');

Ответ №2:

При нажатии:

  • Проверьте текущую кнопку на случай, если это не так.
  • Снимите все флажки, кроме текущего.

Смотрите этот jsfiddle: https://jsfiddle.net/4bjtuunr/5 /

 $('.only').on('click', function() {
    var $current = $(this).closest('.row').find('input');
    var $cbxs = $(this).closest('.checkbox').find('input');
    $current.prop('checked', true);
    $cbxs.not($current).prop('checked', false);
});

Комментарии:

1. Как я упоминал в OP, мне нужно выбрать / отменить выбор условно. Одна из причин заключается в том, что у меня появляется сообщение об ошибке, которое срабатывает, если флажки не выбраны.

2. Боюсь, я не понимаю, что вы имеете в виду. В вашем примере условия говорится: «если флажок установлен: снимите флажок, в противном случае оставьте непроверенным». Зачем вам условное условие, в этом случае результат будет таким же?

3. Правильно, это не то, что делает ваше (и мое) решение. Я также указал, что мне нужно имитировать щелчок пользователя, поскольку у меня есть панель мониторинга, где флажок является фильтром, и пересчет не запускается, если не происходит событие щелчка. Я не знаком с jQuery, но, насколько я понимаю, это prop('checked', true) изменяет только внешний вид кнопки.

4. Я понимаю. При нажатии «только», если текущий флажок снят, он должен оставаться непроверенным? Кроме того, вы можете прослушивать событие изменения вместо события триггерного нажатия. Другой вариант — вызвать общую функцию обратного вызова для обоих событий.

5. Нет, кнопка «только» должна сохранять / изменять checked только соответствующий флажок. И ни в какой момент времени мне не разрешено устанавливать нулевые флажки.

Ответ №3:

Как насчет использования этого. Это может помочь вам поддерживать текущее состояние флажка без слишком большого количества условий для проверки.

    var row = $(this).parents(".row");
   row.siblings().find('input').prop('checked', false);
   row.find('input').prop('checked', true);

https://jsfiddle.net/ydzbddd5/4/

Комментарии:

1. $($(this).parents(".row")).siblings() может быть просто $(this).parents(".row").siblings() возможно?

2. С вашей НОВОЙ строкой var r= $(this).parents(".row"); r.siblings() и r.find( позволяет избежать двойного процесса dom

3. Для этого и нужен этот сайт 🙂 Кстати, мне нравятся братья и сестры