Bootstrap HTML - 选项卡作为单选按钮表单答案

【问题标题】：Bootstrap HTML - Tabs as Radio Buttons FormsBootstrap HTML - 选项卡作为单选按钮表单
【发布时间】：2020-04-22 02:13:27
【问题描述】：

我有一个正在编辑的引导模板。我正在处理一个表单页面，但我似乎无法获得选定的单选按钮，这实际上是一个用于 POST 到 PHP 的标签列表

<div class="from-step-content">
        <ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#item-one">
                    <div class="nav-tabs-icon">
                        <img src="images/1.png" alt="icon">
                        <img src="images/1-color.png" alt="icon">
                    </div>
                    <span>Item One</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#item-two">
                    <div class="nav-tabs-icon">
                        <img src="images/2.png" alt="icon">
                        <img src="images/2-color.png" alt="icon">
                    </div>
                    <span>Item Two</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#item-three">
                    <div class="nav-tabs-icon">
                        <img src="images/3.png" alt="icon">
                        <img src="images/3-color.png" alt="icon">
                    </div>
                    <span>Item Three</span>
                </a>
            </li>
        </ui>
    </div>

这是在 PHP 脚本中使用 POST 方法，但是我无法弄清楚我实际上是如何获得确实已选择的项目。有任何想法吗？谢谢

【问题讨论】：

标签： php html forms radio-button

【解决方案1】：

你应该使用javascript进行不可见的单选框输入，因为你不能发送到PHP HTML DOM，所以你需要用表单进行操作。

所以为了快速帮助：

<form action="post.php" method="post">
    <div class="from-step-content">
        <ul class="nav nav-tabs nav-tabs-bordered" role="tablist" name="selected-item">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#item-one">
                    <input type="radio" name="item" value="1" style="display:none;"/> 
                    <div class="nav-tabs-icon">
                        <img src="images/1.png" alt="icon">
                        <img src="images/1-color.png" alt="icon">
                    </div>
                    <span>Item One</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#item-two">
                    <input type="radio" name="item" value="1" style="display:none;"/>
                    <div class="nav-tabs-icon">
                        <img src="images/2.png" alt="icon">
                        <img src="images/2-color.png" alt="icon">
                    </div>
                    <span>Item Two</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#item-three">
                    <input type="radio" name="item" value="1" style="display:none;"/>
                    <div class="nav-tabs-icon">
                        <img src="images/3.png" alt="icon">
                        <img src="images/3-color.png" alt="icon">
                    </div>
                    <span>Item Three</span>
                </a>
            </li>
        </ui>
    </div>
    <button>Submit</button>
</form>
<script>
    $(document).ready(function(){
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          $('input[type="radio"]').prop("checked", false);
          $(e.target).find('input[type="radio"]').prop("checked", true);
        })
    });
</script>

【讨论】：