jquery 如何使用flask表单复选框选择来更改表单提交时的css列表样式

我在一个 flask 应用程序，我使用 flask 形式提交问题到数据库工作.我使用相同的形式添加多个和描述性的选择问题.在多个选择问题，我输入所有的细节，它的工作正常.当我发布描述性的问题，我只输入问题的细节，标记和章节的其他细节是空白的。我面临的问题是，即使是没有输入的细节留下空白的项目符号，我不想显示。我用金贾模板改变css列表样式的基础上复选框-（描述性问题）选择，但它比改变所有其他问题的风格，而不是新的.
请提供任何建议或意见，以便我可以纠正我的代码。谢谢。
x1c 0d1x的数据

的数据

@app.route('/home', methods=['GET', 'POST'])
@login_required
     def home():    
       form = QuestionForm()
       if form.validate_on_submit():
       if request.form.get('typesel') == 'desc':
       new_question = questions(question=form.question.data, option1 = form.option1.data, 
       option2= form.option2.data, option3 = form.option3.data, option4 = form.option4.data, 
       marks = form.marks.data, chapter = form.chapter.data)
       db.session.add(new_question)
       db.session.commit()
       return redirect(url_for('home'))     

que = questions.query.order_by(questions.chapter).all()
return render_template('home.html', que=que, form=form)

字符串

body {
  background-color: grey;
  color: black;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-submenu-content {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 160px;
}

.dropdown-submenu:hover .dropdown-submenu-content {
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

a.nav-link {
  color: #008080;
}

a.nav-link:hover {
  color: #00008B;
}

.card-body-t {
  padding: 2%;
  background-color: #0449d3a8;
  color: white;
}

.card-body-b {
  background-color: #ECEFF1;
  color: black;
}

form {
  margin: 0 auto;
  width: 1200px;
}

div.des1 {
  background-color: #CFD8DC;
  border: 1px solid #757575;
  box-shadow: 6px 4px 6px -2px #262626;
  color: black;
  margin: -1px;
  border-radius: 5px;
}

div.des2 {
  padding: 1%;
  color: black;
  margin: -1px;
}

div.des3 {
  color: black;
  text-decoration-line: underline;
  margin: -1px;
}

.modal-header {
  background-color: #37474F;
  color: white;
}

.modal-body {
  background-color: #EFEBE9;
}

div.modal-footer {
  background-color: #8D6E63;
}

li.mainqblock {
  list-style: lower-alpha;
}

ul.formqblock {
  list-style: none;
  width: 75%;
}

textarea#questionname {
  align-self: center;
  width: 35%;
}

input#input-option {
  width: 10%;
}

form.qform {
  position: relative;
  padding: 3px;
  /* display: grid; */
  grid-gap: 5px;
}

.selectt {
  display: none;
}

li.mainqblock {
  list-style: lower-alpha;
}

li.checkqblock {
  list-style: none;
}

{% extends "layout.html" %} {% block title %} Home {% endblock %} {% block content %} {% with messages = get_flashed_messages(with_categories=true) %} {% if messages %}
<ul class=flashes>
  {% for category, message in messages %}
  <li class="{{ category }}"> {{ message }} </li>
  {% endfor %}
</ul>
{% endif %} {% endwith %}

<div class="row text-center">
  <div class="des3">
    <h3>MCQ</h3>
  </div>
</div>
<br>

<form method="POST" action="{{ url_for('shortlist') }}">
  <div class="row">
    <div class="col-12">
      {% for q in que %}
      <div class="des1">
        <input class="m-2 p-2" type="checkbox" name="fq" value="{{ q.id }}" id="selq">
        <label class="form-check-label" for="selq">          
          <a class="btn btn-sm-light" href="/remove/{{q.id}}" role="button"><i class="bi bi-trash"></i></a> 
          <a class="btn btn-sm-light" href="/edit/{{q.id}}" data-toggle="modal" data-target="#editquesmodal{{q.id}}" role="button"><i class="bi bi-pencil-square"></i></a>   
          Chapter: {{q.chapter}}, Marks: {{ q.marks }}
        </div>
            <div class="des2">
              <h6 class="mt-2"> {{ q.question }} </h6>
                 {% if selectedValue == 'desc' %}  
                   <ul>
                     <li class="checkqblock">{{ q.option1 }}</li>
                     <li class="checkqblock">{{ q.option2 }}</li>
                     <li class="checkqblock">{{ q.option3 }}</li>
                     <li class="checkqblock">{{ q.option4 }}</li>
                    </ul>
                 {% else %}
                   <ul>
                     <li class="mainqblock">{{ q.option1 }}</li>
                     <li class="mainqblock">{{ q.option2 }}</li>
                     <li class="mainqblock">{{ q.option3 }}</li>
                     <li class="mainqblock">{{ q.option4 }}</li>
                    </ul>
                 {% endif %}
              </div>
            </div>   
          {% endfor %}            
      </div>
  </div>

<div style = "position:fixed; right:6%; top:13%;">
  <button class="btn btn-light" type="submit"><i class="bi bi-funnel"></i> </button>
</div>
</form>

<!-- Add new question Button trigger modal -->
<div style = "position:fixed; right:2%; top:13%;"><a class="btn btn-light" data-toggle="modal" data-target="#addquesmodal" role="button"><i class="bi bi-plus-square"></i></a></div>

<!-- Modal -->
<div class="modal fade" id="addquesmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Add New Question</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <!--  Add new question form starts here -->
        <div class="container">
          <form class="qform" action="{{ (url_for('home'))}}" method ="POST">
            {{ form.csrf_token }}
            {{ form.hidden_tag() }}
            
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="typesel" value="desc" id="typesel" />
              <label class="form-check-label" for="typesel">Descriptive Question</label>
      </div>

      <div class="form-group row">
        <label for="questionname">Question</label>
        <textarea class="form-control" type="text" id="questionname" name="question" col="10">                 </textarea>
      </div>

      <div class="form-group row">
        <div class="form-group col-md-2">
          <label for="option1">Option 1</label>
          <input class="form-control" type="text" name="option1">
        </div>

        <div class="form-group col-md-2">
          <label for="option2">Option 2</label>
          <input class="form-control" type="text" name="option2">
        </div>
      </div>

      <div class="form-group row">
        <div class="form-group col-md-2">
          <label for="option3">Option 3</label>
          <input class="form-control" type="text" name="option3">
        </div>

        <div class="form-group col-md-2">
          <label for="option4">Option 4</label>
          <input class="form-control" type="text" name="option4">
        </div>
      </div>

      <div class="form-group row">
        <div class="form-group col-md-2">
          <label for="marks">Marks</label>
          <input class="form-control" type="text" name="marks">
        </div>

        <div class="form-group col-md-2">
          <label for="chapter">Chapter</label>
          <input class="form-control" type="text" name="chapter">
        </div>
      </div>
      <br>
      <button class="btn btn-dark" type="submit">Add New question</button>
    </div>

</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

的数据

jquery 如何使用flask表单复选框选择来更改表单提交时的css列表样式

1条答案

相关问题

热门标签

最新问答