堆栈内存溢出
  繁体   English   中英

Bootstrap 单选按钮在烧瓶中不起作用

[英]Bootstrap radio button isn't working in flask

 原文  2020-01-03 07:16:28  4   2    javascript/ python/ html/ css/ flask

问题描述

我在烧瓶应用程序中使用 Bootstrap 4 单选按钮单选按钮。 下面是我使用的片段

 <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-secondary">
      <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
    </label>

    <label class="btn btn-outline-secondary"    >
      <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
    </label>
 </div>

和 javascript 代码

<script type="text/javascript">
        function toggleElements() {
            alert('hurray');
            if(document.getElementBId('twitter').checked) {
                document.getElementById('twitterrows').style.display = 'block';
                document.getElementById('facebookrows').style.display = 'none';
            }

            if(document.getElementById('facebook').checked) {

                document.getElementById('facebookrows').style.display = 'block';
                document.getElementById('twitterrows').style.display = 'none';
            }
        }
</script>

最初，我尝试使用简单的 html 单选按钮，并且能够触发 Javascript 函数 toggleElements()。 然而，在用 bootstrap radio 替换普通单选按钮后，什么也不会触发。

下面是整个html代码

{% from 'helper/forms.html' import render_field with context %}
<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharjah Tourism Search Results</title>

    <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{ url_for('static',filename='styles/home.css')}}"/>

    <script type="text/javascript">
            function toggleElements() {
                alert('hurray');
                if(document.getElementBId('twitter').checked) {
                    document.getElementById('twitterrows').style.display = 'block';
                    document.getElementById('facebookrows').style.display = 'none';
                }

                if(document.getElementById('facebook').checked) {

                    document.getElementById('facebookrows').style.display = 'block';
                    document.getElementById('twitterrows').style.display = 'none';
                }
            }
    </script>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="{{ url_for('home')}}"><strong>Search</strong></a>

        <button class = "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent-7">
                <ul class="navbar-nav mr-auto">

                 <li class="nav-item">
                     <a class="nav-link" href="{{url_for('add_url')}}">Add<span class="sr-only">(current)</span></a>
                 </li>

                 <li class="nav-item">
                     <a class="nav-link" href="{{ url_for('file_render')}}">Import</a>
                 </li>

                 <li class="nav-item dropdown">
                     <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            Websites
                     </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="{{ url_for('list_urls') }}">List</a>
                        <a class="dropdown-item" href="{{ url_for('list_crawled_websites')}}">Selected</a>
                    </div>
                </li>
            </ul>
         </div>
     </nav>

    <!-- Header -->
    <div class="container">
         <br />
        <div class="row">
             <!-- Logo -->
            <div class="col-sm">
                <a href="#"><img class="w-50 h-60" src="{{url_for('static',filename='images/sctda_logo.jpg')}}" /></a>
            </div>

             <!-- Search Bar -->
            <div class="col-sm-5 searchbar">
                <form action="{{url_for('fetch_results')}}" method="POST">
                    <div class="input-group">
                        <input type="search" placeholder="Search" class="form-control" name="search" id="search" value="{{data['search_term']}}" class="w-75 h-75" required>
                        <div class="input-group-append">
              <button type="submit" class="btn btn-outline-secondary btn-sm"><i class="fa fa-search"></i></button>
            </div>
                    </div>
                </form>
            </div>

        </div>


        <div id="container">
            <div class="row">
            {%set data = data['results'] %}
             <div class="col-md-4">
                 <div class="btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-secondary active">
                         <input type="radio" checked autocomplete="off"> Internal
                     </label>
                 </div>
                 <hr>

                 {% set internals = data['internal'] %}
                 {% if internals is defined and internals|length %}
                 {% for internal in internals %}
                 <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ internal['title'] }}</h5>
                    <p class="card-text">{{ internal['description'] }}</p>
                    <a href="{{ internal['url'] }}" class="card-link">{{ internal['title'] }}</a>
                </div>
            </div>
            <br/>
                 {% endfor %}
                 {% else %}
                 <div class="card">
                <div class="card-body">
                    <h5 class="card-title">No Records Found</h5>
                </div>
            </div>
            <br/>
                 {% endif %}
             </div>

             <div class="col-md-4">
                {% set externals = data['external'] %}
                {% if externals is defined and externals|length %}
                <div class="btn-group-toggle" data-toggle="buttons">
                    <label class="btn btn-outline-secondary active">
                        <input type="radio" checked autocomplete="off"> External
                    </label>
                </div>
                <hr>
                {% for external in externals %}
                <div class="card">
                 <div class="card-body">
                     <h5 class="card-title">{{ external['title'] }}</h5>
                     <p class="card-text">{{ external['description'] }}</p>
                     <a href="{{ external['url'] }}" class="card-link">{{ external['title'] }}</a>
                 </div>
             </div>
             <br/>
             {% endfor %}
             {% else %}
             <div class="card">
                <div class="card-body">
                    <h5 class="card-title">No Records Found</h5>
                </div>
            </div>
            <br/>
             {% endif %}
            </div>

             <div class="col-md-4">
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                     <label class="btn btn-outline-secondary">
                         <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
                     </label>

                     <label class="btn btn-outline-secondary"   >
                         <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
                     </label>
                    </div>
                    <hr>
                    (<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter,
                    <input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook)
                 <div id="twitterrows">
                     {% set tweets = data['twitter'] %}
                     {% if tweets is defined and tweets|length %}
                     {% for tweet in tweets %}
                     <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ tweet['title'] }}</h5>
                            <p class="card-text">{{ tweet['description'] }}</p>
                            <a href="{{ tweet['url'] }}" class="card-link">{{ tweet['title'] }}</a>
                        </div>
                    </div>
                    <br/>
                    {% endfor %}
                    {% else %}
                    <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">No Records Found</h5>
                     </div>
                 </div>
                 <br/>
                    {% endif %}
                 </div>

                 <div id="facebookrows">
                     {% set posts = data['facebook'] %}
                     {% if posts is defined and posts|length %}
                     {% for post in posts %}
                     <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">{{ post['title'] }}</h5>
                            <p class="card-text">{{ post['description'] }}</p>
                            <a href="{{ post['url'] }}" class="card-link">{{ post['title'] }}</a>
                        </div>
                    </div>
                    <br/>
                    {% endfor %}
                    {% else %}
                    <div class="card">
                     <div class="card-body">
                         <h5 class="card-title">No Records Found</h5>
                     </div>
                 </div>
                 <br/>
                    {% endif %}
                 </div>
             </div>
        </div>
    </div>
    <center>Developed by School of Information Technology Team,Skyline University College</center>
</body>
</html>

我强烈怀疑在 head 标签下调用脚本的顺序。 有人可以帮我解决这个问题吗？

2 个解决方案

解决方案1
 1  2020-01-03 07:30:00

  1. 确保您包含了正确版本的引导程序。 请检查浏览器控制台中是否有任何错误。
  2. https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios 。
  3. 我怀疑 javascript click 没有正确绑定到 click 事件。

解决方案2
 0  2020-01-04 04:11:54

我通过用下面的替换上面 html 页面中的三个脚本标签来修复它

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单选按钮功能不起作用？ 为什么我的单选按钮实现无法正常运行 自制单选按钮的javascript无法正常工作 单选按钮引导面板不起作用 关闭按钮不适用于 react-bootstrap 模态组件 导航栏切换按钮无法使用 Bootstrap 4.5.3 做出反应 选择一个单选按钮不是一个事件？ 为什么单选按钮不可点击？ jQuery未设置单选按钮 Bootstrap不适用于jQuery
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM