将单选按钮问题部分明智地显示为 HTML/JS 页面的选项卡

Question

我已经创建了一个调查，但调查的问题正在一个一个地来。 我想把它们分节放在一个标签中，这样它们看起来不错。 是否有任何引导程序组件或我可以使用的任何其他内容，以便调查问题看起来更好，可能是选项卡或其他内容。添加图片以提供更多清晰度

Html 页面：-

    <p>
  Select a radio button and click on Submit.
</p>
<div class="section-1">

  <h2>Section 1</h2>
  question 1:
  <input type="radio" name="question1" value="1">1
  <input type="radio" name="question1" value="2">2
  <input type="radio" name="question1" value="3">3

  <br> question 2:
  <input type="radio" name="question2" value="1">1
  <input type="radio" name="question2" value="2">2
  <input type="radio" name="question2" value="3">3

  <br> question 3:
  <input type="radio" name="question3" value="1">1
  <input type="radio" name="question3" value="2">2
  <input type="radio" name="question3" value="3">3

</div>
<div class="section-2">

  <h2>Section 2</h2>
  question 1:
  <input type="radio" name="question4" value="1">1
  <input type="radio" name="question4" value="2">2
  <input type="radio" name="question4" value="3">3

  <br> question 2:
  <input type="radio" name="question5" value="1">1
  <input type="radio" name="question5" value="2">2
  <input type="radio" name="question5" value="3">3
  <br> question 3:
  <input type="radio" name="question6" value="1">1
  <input type="radio" name="question6" value="2">2
  <input type="radio" name="question6" value="3">3
  <br> question 4:
  <input type="radio" name="question7" value="1">1
  <input type="radio" name="question7" value="2">2
  <input type="radio" name="question7" value="3">3
</div>
<br>

<div class="final-results"></div>
<br>

<button type="button" onclick="displayRadioValue()">
      Submit
     </button>

<div id="control" style="display: none"><a id="toemail" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to   
      email</a>&nbsp<button onclick="window.print();">Send to PDF</button></div>

Js页面：-

    function displayRadioValue() {

  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  //Final Results and validation
  if (section1Total > 0 && section2Total > 0) {
    finalResults.innerHTML += genTable(section1Question, section1Total, 1)
    finalResults.innerHTML += genTable(section2Question, section2Total, 2)
  } else {
    finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '}
    document.getElementById("control").style.display = "block";
    document.getElementById("toemail").href += document.getElementById("final-results").innerText;

  }

样式页面：-

    @media print {
  body * {
    visibility: hidden;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

Answer 1

您可以使用Bootstrap JS 选项卡

<ul class="nav nav-tabs">
   <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#section1">section 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section2">section 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#section3">section 3</a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active container" id="section1">...</div>
      <div class="tab-pane container" id="section2">...</div>
      <div class="tab-pane container" id="section3">...</div>
    </div>

请参阅www.w3schools.com

Answer 2

这是适合您的完整工作代码。 我正在使用bootstrap和tab section类来获得desired结果。

此外，我已经创建了每个问题的每个fieldsets ，以便您可以easy执行一些CSS并根据需要自定义 HTML，或者稍后向其中添加更多问题！

我添加了results部分，当从每个部分选择一个问题时，它将显示结果。 以及Send to PD F 和Send to Email工作正常。

现场工作演示：

 function displayRadioValue() { let section1 = document.querySelectorAll('.section-1 > input[type="radio"]') let section2 = document.querySelectorAll('.section-2 > input[type="radio"]') let section1Total = 0 let section2Total = 0 let section1Question = 0 let section2Question = 0 let finalResults = document.querySelector('.final-results') let result1 = '' let result2 = '' finalResults.innerHTML = '' //Section 1 section1.forEach(function(radio, index) { if (radio.checked) { section2Question++ section1Total += +radio.value } }) //Section 2 section2.forEach(function(radio, index) { if (radio.checked) { section1Question++ section2Total += +radio.value } }) //Final Results and validation if (section1Total > 0 && section2Total > 0) { finalResults.innerHTML += genTable(section1Question, section1Total, 1) finalResults.innerHTML += genTable(section2Question, section2Total, 2) document.getElementById("control").style.display = "block"; document.getElementById("toemail").href += document.querySelector(".final-results").innerText; } else { finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section ' } } function genTable(ques, total, section) { var result = "<b>Section " + section + ":</b><br>" var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>" result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>" return result }

 @media print { body * { visibility: hidden; } .final-results * { visibility: visible; } .final-results { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } } table, table tr th, table tr td { border: 1px solid black; }

 <!DOCTYPE html> <html lang="en"> <head> <title>Survey Question</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <style> </style> <section class="container py-4"> <div class="row"> <div class="col-md-12"> <h2>Survey</h2> <ul id="tabs" class="nav nav-tabs"> <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase active">Section 1</a></li> <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li> <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li> </ul> <br> <div id="tabsContent" class="tab-content"> <div id="section1" class="tab-pane fade active show"> <div class="section-1-questions"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1"> <label class="form-check-label" for="gridRadios1"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2"> <label class="form-check-label" for="gridRadios2"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3"> <label class="form-check-label" for="gridRadios3"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1"> <label class="form-check-label" for="gridRadios4"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2"> <label class="form-check-label" for="gridRadios5"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3"> <label class="form-check-label" for="gridRadios6"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend> <div class="col-sm-10"> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1"> <label class="form-check-label" for="gridRadios7"> 1 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2"> <label class="form-check-label" for="gridRadios8"> 2 </label> </div> <div class="form-check section-1"> <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3"> <label class="form-check-label" for="gridRadios9"> 3 </label> </div> </div> </div> </fieldset> </div> </div> <div id="section2" class="tab-pane fade"> <div class="section-2-question"> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1"> <label class="form-check-label" for="gridRadios10"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2"> <label class="form-check-label" for="gridRadios11"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3"> <label class="form-check-label" for="gridRadios12"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1"> <label class="form-check-label" for="gridRadios13"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2"> <label class="form-check-label" for="gridRadios14"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3"> <label class="form-check-label" for="gridRadios15"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1"> <label class="form-check-label" for="gridRadios16"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2"> <label class="form-check-label" for="gridRadios17"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3"> <label class="form-check-label" for="gridRadios18"> 3 </label> </div> </div> </div> </fieldset> <fieldset class="form-group"> <div class="row"> <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend> <div class="col-sm-10"> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1"> <label class="form-check-label" for="gridRadios19"> 1 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2"> <label class="form-check-label" for="gridRadios20"> 2 </label> </div> <div class="form-check section-2"> <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3"> <label class="form-check-label" for="gridRadios21"> 3 </label> </div> </div> </div> </fieldset> </div> </div> <div id="results" class="tab-pane fade"> <div class="final-results"></div> <br> <button type="button" class="btn btn-success" onclick="displayRadioValue()"> Show Results </button> <br> <br> <div id="control" style="display: none"> <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button> </div> </div> </div> </div> </div> </section> </body> </html>

Answer 3

此引导程序官方文档中有一个名为 Pills 的部分，可能对您有所帮助，请在此处找到相关链接

Answer 4

在头部部分请添加：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

在正文部分的最后，请添加：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

这是您的 HTML 代码：

  <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="section1-tab" data-toggle="tab" href="#section1" role="tab" aria-controls="section1"
                aria-selected="true">Section 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="section2-tab" data-toggle="tab" href="#section2" role="tab" aria-controls="section2"
                aria-selected="false">Section 2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="section3-tab" data-toggle="tab" href="#section3" role="tab" aria-controls="section3"
                aria-selected="false">Section 3</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="section1" role="tabpanel" aria-labelledby="section1-tab">
            question 1:
            <input type="radio" name="question1" value="1">1
            <input type="radio" name="question1" value="2">2
            <input type="radio" name="question1" value="3">3

            <br> question 2:
            <input type="radio" name="question2" value="1">1
            <input type="radio" name="question2" value="2">2
            <input type="radio" name="question2" value="3">3

            <br> question 3:
            <input type="radio" name="question3" value="1">1
            <input type="radio" name="question3" value="2">2
            <input type="radio" name="question3" value="3">3
        </div>
        <div class="tab-pane fade" id="section2" role="tabpanel" aria-labelledby="section2-tab">
            question 1:
            <input type="radio" name="question1" value="1">1
            <input type="radio" name="question1" value="2">2
            <input type="radio" name="question1" value="3">3

            <br> question 2:
            <input type="radio" name="question2" value="1">1
            <input type="radio" name="question2" value="2">2
            <input type="radio" name="question2" value="3">3

            <br> question 3:
            <input type="radio" name="question3" value="1">1
            <input type="radio" name="question3" value="2">2
            <input type="radio" name="question3" value="3">3
        </div>
        <div class="tab-pane fade" id="section3" role="tabpanel" aria-labelledby="section3-tab">
            question 1:
            <input type="radio" name="question1" value="1">1
            <input type="radio" name="question1" value="2">2
            <input type="radio" name="question1" value="3">3

            <br> question 2:
            <input type="radio" name="question2" value="1">1
            <input type="radio" name="question2" value="2">2
            <input type="radio" name="question2" value="3">3

            <br> question 3:
            <input type="radio" name="question3" value="1">1
            <input type="radio" name="question3" value="2">2
            <input type="radio" name="question3" value="3">3
        </div>
    </div>