javascript - 单击两个输入的相同标签名称的关闭图标时取消选中选中的输入

标签 javascript jquery css

到目前为止，我所做的是当用户单击标签时，该标签的复选框被选中，标签的值连同关闭图标一起附加到另一个 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>

最佳答案

为复选框和 for="id" 使用唯一的 id，这样即使单击标签或跨度，复选框也能正常工作。 由于类似的属性似乎多次出现，因此为它们分配了重要性数据属性或其他内容。

请检查下面的代码片段，如果您的要求不同，请发表评论。 此处列出了我应用的一些更改，

  • 对复选框使用唯一的 id，对 label 或 span 使用 for="id"/p>

  • 使用 data-id="id"(data-attribute) 帮助数据操作

  • 使用 let 而不是 var 因为它们是在本地而不是全局声明的
  • 使用 .off()(即 .off('click')。取消绑定(bind)事件更好
  • 在将数据附加/绑定(bind)到另一个 div 元素之前检查复选框是否被选中
  • 如果数据是从这段代码片段中的 js eventListener() 绑定(bind)的，那么最好在成功绑定(bind)数据后调用一个事件

$('.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>

关于javascript - 单击两个输入的相同标签名称的关闭图标时取消选中选中的输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59675811/

上一篇：css - 使用样式组件的媒体查询中的语法问题

下一篇：css - 背景不会垂直调整大小

相关文章：

javascript - 我无法在 Javascript 中调用任何对象的方法

javascript - 菜单从顶部开始并将页面向下推

JQuery 1.6.1 今天在 Google API 上不可用 (01/25/2012)

javascript - 格式化抓取的 HTML 的最佳实践

Jquery 事件 onclick 不起作用

html - chrome 计算样式覆盖了我的样式

javascript - 如何在切换前更改按钮的初始宽度？

javascript - 如何将纬度/经度值从谷歌地图信息窗口传递到 JavaScript 函数？

javascript - zIndex 在 IOS 的 react-native 中无法正常工作

jquery - Bootstrap 行居中问题

©2024 IT工具网  联系我们