Снимите флажок с проверенного ввода при нажатии на значок закрытия для того же имени метки для обоих входов

Question

Пока что я делал, когда пользователь нажимал на ярлык, флажок этого ярлыка был установлен, а значение ярлыка добавлялось в другой элемент div вместе со значком закрытия. Когда мы нажимаем значок закрытия или снимаем флажок, флажок будет отключен. Но когда у нас будет одно и то же имя ярлыка для двух флажков, при щелчке на значке закрытия или снятии флажка для одного из них оба флажка не будут отмечены, поскольку один и тот же ярлык будет активен. Надеюсь, вы получаете то, что я пытаюсь сказать. Вот фрагмент кода для вас, чтобы быть более ясным. Любая помощь будет оценена.

var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
  data = $(this).text().trim();
  input_value = data.split(' ').join('_');
  $(this).prev('input').attr({
    'value': input_value,
    'id': input_value
  });
  e.stopImmediatePropagation();
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    passed_value = $(`<div><span>` + data + `</span><i class="fas fa-times"></i></div>`).prop('title', data);
    $('.result-text1').append(passed_value).css('cursor', 'default');
  } else {
    $('.result-text1 span:contains(' + data + ')').parent().remove();
  }
})
var active_text;
$('body').on('click', '.result-text1 i', function(e) {
  e.stopImmediatePropagation();
  $(this).parent('div').remove();
  var text_div = $(this).prev().text();
  // console.log(text_div);
  active_text = $('.form-check-label.active:contains(' + text_div + ')');
  if ($(active_text)) {
    $(active_text).removeClass('active').prev().prop('checked', false);
  }
})

.result-text1 div {
  display: grid;
  grid-template-columns: min-content min-content;
  grid-column-gap: 5px;
}

.result-text1 div span {
  color: #1e699b;
  padding: 7px;
  font-size: 12px;
  border: 1px solid #1e699b;
  border-radius: 7px;
  // margin-right: 7px;
  text-overflow: ellipsis;
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}

i {
  height: 17px;
  width: 17px;
  background: #eaeaea;
  border-radius: 50%;
  color: #2d84d7;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
   <article class="card-group-item">
      <header class="card-header">
         <h6 class="title">pickup time </h6>
      </header>
      <div class="filter-content">
         <div class="card-body">
            <form>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               morning
               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               afternoon
               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               evening
               </span>
               </label>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               night
               </span>
               </label>
               <!-- form-check.// -->
            </form>
         </div>
         <!-- card-body.// -->
      </div>
   </article>
   <!-- card-group-item.// -->
   <article class="card-group-item">
      <header class="card-header">
         <h6 class="title">drop time </h6>
      </header>
      <div class="filter-content">
         <div class="card-body">
            <form>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               morning
               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               afternoon                               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               evening
               </span>
               </label>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="">
               <span class="form-check-label">
               night
               </span>
               </label>
               <!-- form-check.// -->
            </form>
         </div>
         <!-- card-body.// -->
      </div>
   </article>
   <!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

Answer 1

Используйте уникальный id для флажка и for="id", чтобы флажок работал, даже если нажата метка или интервал. Поскольку подобное свойство, кажется, присутствует несколько раз, присвойте им значащий атрибут данных или что-то еще.

Пожалуйста, проверьте фрагмент кода ниже и оставьте комментарий, если ваше требование отличается. Некоторые изменения, которые я применил, перечислены здесь:

• используйте уникальный id для флажка и for="id" для label или span

• используется data-id="id" (data-attribute), который помогает в манипулировании данными

• используйте let вместо var, поскольку они объявлены локально, а не глобально
• use .off() (то есть .off('click'). Лучше отменять привязку событий
• проверять, установлен ли флажок или нет, перед добавлением / привязкой данных в другом элементе div
• лучше вызывать событие после успешного связывания данных, если данные связываются с js eventListener() в этом фрагменте кода

$('.form-check-input').off().on('click', function(e) {
    let id = $(this).attr('id');

    data = $(this).next('span').text().trim();
    input_value = data.split(' ').join('_');
    // $(this).prev('input').attr({
    //     'value': input_value,
    //     'id': input_value
    // });
    //e.stopImmediatePropagation();
    $(this).toggleClass('active');
    if ($(this).is(':checked')) {
        passed_value = $(`<div data-id=${id}><span>` + data +
                `</span><i class="fas fa-times btnCross"></i></div>`)
            .prop('title',
                data);
        $('.result-text1').append(passed_value).css('cursor', 'default');
    } else {
        $(`div[data-id="${id}"]`).remove();
    }
    eventListener();
});

function eventListener() {
    $('.btnCross').off().on('click', function(e) {
        // e.stopImmediatePropagation();
        let $this = $(this);
        let targetEle = $this.parent().attr('data-id');
        $this.parent().remove();
        $(`#${targetEle}`).prop('checked', false);
        //var text_div = $(this).prev().text();
        // console.log(text_div);
        // active_text = $('.form-check-label.active:contains(' + text_div + ')');
        // if ($(active_text)) {
        //     $(active_text).removeClass('active').prev().prop('checked', false);
        // }
    })
}

 .result-text1 div {
        display: grid;
        grid-template-columns: min-content min-content;
        grid-column-gap: 5px;
    }
    
    .result-text1 div span {
        color: #1e699b;
        padding: 7px;
        font-size: 12px;
        border: 1px solid #1e699b;
        border-radius: 7px;
        text-overflow: ellipsis;
        width: 110px;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        text-align: center;
    }
    
    i {
        height: 17px;
        width: 17px;
        background: #eaeaea;
        border-radius: 50%;
        color: #2d84d7;
        display: grid;
        justify-content: center;
        align-items: center;
        font-size: 11px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
    <article class="card-group-item">
        <header class="card-header">
            <h6 class="title">pickup time </h6>
        </header>
        <div class="filter-content">
            <div class="card-body">
                <form id="pickupTime">
                    <label class="form-check">
                        <input class="form-check-input" id="ptMorning" type="checkbox" value="">
                        <span for="ptMorning" class="form-check-label">
                            morning
                        </span>
                    </label>
                    <!-- form-check.// -->
                    <label class="form-check">
                        <input class="form-check-input" id="ptAfternoon" type="checkbox" value="">
                        <span for="ptAfternoon" class="form-check-label">
                            afternoon
                        </span>
                    </label>
                    <!-- form-check.// -->
                    <label class="form-check">
                        <input class="form-check-input" id="ptEvening" type="checkbox" value="">
                        <span for="ptEvening" class="form-check-label">
                            evening
                        </span>
                    </label>
                    <label class="form-check">
                        <input class="form-check-input" id="ptNight" type="checkbox" value="">
                        <span for="ptNight" class="form-check-label">
                            night
                        </span>
                    </label>
                    <!-- form-check.// -->
                </form>
            </div>
            <!-- card-body.// -->
        </div>
    </article>
    <!-- card-group-item.// -->
    <article class="card-group-item">
        <header class="card-header">
            <h6 class="title">drop time </h6>
        </header>
        <div class="filter-content">
            <div class="card-body">
                <form id="dropTime">
                    <label class="form-check">
                        <input class="form-check-input" id="dtMorning" type="checkbox" value="">
                        <span for="dtMorning" class="form-check-label">
                            morning
                        </span>
                    </label>
                    <!-- form-check.// -->
                    <label class="form-check">
                        <input class="form-check-input" id="dtAfternoon" type="checkbox" value="">
                        <span for="dtAfternoon" class="form-check-label">
                            afternoon </span>
                    </label>
                    <!-- form-check.// -->
                    <label class="form-check">
                        <input class="form-check-input" id="dtEvening" type="checkbox" value="">
                        <span for="dtEvening" class="form-check-label">
                            evening
                        </span>
                    </label>
                    <label class="form-check">
                        <input class="form-check-input" id="dtNight" type="checkbox" value="">
                        <span for="dtNight" class="form-check-label">
                            night
                        </span>
                    </label>
                    <!-- form-check.// -->
                </form>
            </div>
            <!-- card-body.// -->
        </div>
    </article>
    <!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

Answer 2

Посмотрите на скрипку JS: https://jsfiddle.net/0e4756ub/2/

Я указал id & value для флажка только во время проектирования и использования того же во время нажав на значок закрытия.

JS:

var passed_value, data, input_value, checkbox_items;
$('.form-check-label').click(function(e) {
  data = $(this).text().trim();
  input_value = data.split(' ').join('_');
  var checkbox_id = $(this).prev('input').attr('id');
  e.stopImmediatePropagation();
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    passed_value = $('<div><span data-id="'+ checkbox_id +'">' + data + '</span><i class="fas fa-times"></i></div>').prop('title', data);
    $('.result-text1').append(passed_value).css('cursor', 'default');
  } else {
    $('.result-text1 span:contains(' + data + ')').parent().remove();
  }
});
$('body').on('click', '.result-text1 i', function(e) {
  e.stopImmediatePropagation();
  $(this).parent('div').remove();
  var checkbox_id = $(this).prev().attr('data-id');
  if ($('#'+ checkbox_id)) {
    $('#'+ checkbox_id).prop('checked', false);
    $('#'+ checkbox_id).next('span').removeClass('active').prev();
  }
});

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/cd3112b74c.js" crossorigin="anonymous"></script>
<div class="card">
   <article class="card-group-item">
      <header class="card-header">
         <h6 class="title">pickup time </h6>
      </header>
      <div class="filter-content">
         <div class="card-body">
            <form>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="morning-pickup" id="morning-pickup">
               <span class="form-check-label">
               morning
               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="afternoon-pickup" id="afternoon-pickup">
               <span class="form-check-label">
               afternoon
               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="evening-pickup" id="evening-pickup">
               <span class="form-check-label">
               evening
               </span>
               </label>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="night-pickup" id="night-pickup">
               <span class="form-check-label">
               night
               </span>
               </label>
               <!-- form-check.// -->
            </form>
         </div>
         <!-- card-body.// -->
      </div>
   </article>
   <!-- card-group-item.// -->
   <article class="card-group-item">
      <header class="card-header">
         <h6 class="title">drop time </h6>
      </header>
      <div class="filter-content">
         <div class="card-body">
            <form>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="morning-drop" id="morning-drop">
               <span class="form-check-label">
               morning
               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="afternoon-drop" id="afternoon-drop">
               <span class="form-check-label">
               afternoon                               </span>
               </label>
               <!-- form-check.// -->
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="evening-drop" id="evening-drop">
               <span class="form-check-label">
               evening
               </span>
               </label>
               <label class="form-check">
               <input class="form-check-input" type="checkbox" value="night-drop" id="night-drop">
               <span class="form-check-label">
               night
               </span>
               </label>
               <!-- form-check.// -->
            </form>
         </div>
         <!-- card-body.// -->
      </div>
   </article>
   <!-- card-group-item.// -->
</div>
<!-- card.// -->
<div class="result-text1"></div>

CSS:

.result-text1 div {
  display: grid;
  grid-template-columns: min-content min-content;
  grid-column-gap: 5px;
}

.result-text1 div span {
  color: #1e699b;
  padding: 7px;
  font-size: 12px;
  border: 1px solid #1e699b;
  border-radius: 7px;
  // margin-right: 7px;
  text-overflow: ellipsis;
  width: 110px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-align: center;
}

i {
  height: 17px;
  width: 17px;
  background: #eaeaea;
  border-radius: 50%;
  color: #2d84d7;
  display: grid;
  justify-content: center;
  align-items: center;
  font-size: 11px;
}