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

Question

我有一个应用程序可以打印出列表的内容(使用Python/Flask(。每个项目都是一个复选框输入，但是我已经用CSS隐藏了复选框。从视觉上看，我试图使用户单击标签文本时，该项目被标记为选中(隐藏(，并且文本周围会显示边框以进行确认。

完成所有选择后，提交按钮会将所有内容发送回 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>

主要问题似乎是以下jquery。我在另一篇文章中找到了这个，它在视觉上做了我想要的，但是e.preventDefault杀死了复选框功能：

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

如果我删除它：

$('.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");
});
});

现在它按计划工作。

Answer 1

因为您隐藏了输入，因此您可以以不同的方式放置标签。

如果你把<label>放在<input>之后，并在label中使用for=<input_id>，那么你不需要JS，你只能用CSS来做：

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()

Answer 2

我想也许这就是你要找的，尽管这是 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]');

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

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

这是一个指向CodePen的链接，您可以在其中看到它的工作原理。我不隐藏复选框，这样您就可以看到它被选中和取消选中。

按钮文本框代码笔