javascript - 使用 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>并使用for=<input_id>在label那么你不需要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()