使用jquery或javascript在单击复选框标签时切换边框

我有一个应用程序，它使用Python/Flask打印列表的内容。每个项目都是一个复选框输入，但是我用CSS隐藏了复选框。在视觉上，当用户单击标签文本时，项目被标记为checked hidden，并在文本周围显示一个边框进行确认

完成所有选择后，submit按钮将所有内容发送回Flask进行处理。所有的功能都在那里，并且正在发挥作用。在切换边界的视觉方面，我正经历着最艰难的时刻

HTML实际上有两个类似的列，但为了简单起见，我只放一个：

<form action="/choices" method="post">

  <div class="left-col-results">
    {% for i in range(0, toplen) %}
    <label class="left-label-check">
      <input class="form-check-input-left" type="checkbox"
                                   name="checked" value="{{ top[i] }}">{{ top[i] } 
    </label>
    <br>
    {%endfor%}
</div>

如果我删除它：

$('.left-label-check').on('click', function(){
      $(this).toggleClass('text-border');
    });

它不再添加边界！非常感谢您的帮助

****更新：

终于开始工作了。我没有正确的ajax链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

并使用此语法切换类：

<label for="idl{{i}}" class="choice">{{ top[i] }}</label>



$(document).ready(function(){
        $('label.choice').click(function(){
       $(this).toggleClass("text-border");
     });
    });

---

现在它按计划工作了。

我想也许这就是你想要的，尽管这是VanillaJS的做法：

var leftLableCheck = document.querySelector('.left-label-check');
var checkbox = document.querySelector('[type=checkbox]');

leftLableCheck.addEventListener('click', function() {
  this.setAttribute('class', 'text-border left-label-check')
});

checkbox.addEventListener('click', function(e) {
  e.stopPropagation();
});

基本上，我们首先获取父标签元素和子复选框元素：

var leftLableCheck = document.querySelector('.left-label-check');
var checkbox = document.querySelector('[type=checkbox]');

然后，我们将“单击”事件侦听器附加到每个侦听器，但我们停止复选框本身上单击事件的传播，这样它就不会冒泡，并在标签侦听器中运行代码两次：

leftLableCheck.addEventListener('click', function() {
  this.setAttribute('class', 'text-border left-label-check')
});

checkbox.addEventListener('click', function(e) {
  e.stopPropagation();
});

这里有一个代码笔的链接，你可以看到它在工作。我没有隐藏复选框，这样你可以看到它被选中和取消选中

---

因为您隐藏了输入，所以可以以不同的方式放置标记

如果您在标签后面加上并使用for=in，则不需要JS，只能使用CSS：

input:checked + label {border: 1px solid red}

代码

---

您是否尝试删除e.preventDefault？谢谢不幸的是，它似乎仍然不起作用。我可以单击文本并注册复选框，但边框仍然不会更改。您是否在输入后直接更改了HTML-put标签，而不是在输入周围？您是否在标签中使用了for=以及输入中的名称？示例代码适用于我。我仔细检查了一下，一切都是一样的。奇怪。如果您在服务器上运行它，或者在GitHub或类似的平台上保留完整的代码，那么添加url来查看它。这似乎只适用于列表中的第一项。一切都在For循环中，所以我不确定发生了什么。。。。。

input:checked + label {border: 1px solid red}

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string('''
<style>
   input:checked + label {border: 1px solid red}
</style>

<form action="/choices" method="post">
  <div class="left-col-results">
  {% for item in top %}
    <input id="id{{ loop.index }}" class="form-check-input-left" type="checkbox" name="checked" value="{{ item }}">
    <label for="id{{ loop.index }}" class="left-label-check">{{ item }}</label>
    <br>
  {%endfor%}
  </div>
</form>''', top=['a', 'b', 'c'])

app.run()