使用 JavaScript 为单选按钮中的 "yes" 和 "no" 选择创建一个计数器

Question

我一直在阅读网站的问题，但我没有找到任何可以帮助我找到问题解决方案的问题：

我需要创建一个计数器，显示在表单中选择“是”选项的次数以及在表单中选择“否”选项的次数。然后，我需要根据“是”选项的数量占选项总数的百分比来计算百分比。

这是HTML：

        <section>
        <h2>Cumplimiento 1</h2>
            <form class="form3">
            <fieldset class="Compliance">
                <label class="form3header1" for="complianceperc">Cumplimiento (%)</label>
                <span class="percentage" type="number" id="complianceperc" name="complianceperc"></span>

                <label class="form3item1" for="yescount">Sí (cantidad)</label>
                <span id="price" class="counter"></span>    
                
                <label class="form3item2" for="yescount">No (cantidad)</label>
                <span class="counter"></span>

                </fieldset>
            </form>
            
        </section>

这里是 JavaScript（基于 Whosebug 中的其他答案）：

$('.counter').text($(':radio:checked').length);

$('input[type=radio]').change(function(){
  $('.counter').text($(':radio:checked').length);
});

这是单选按钮组之一：

<label class="form4item1">1. ¿El Asesor de Servicio comienza a atender al Cliente en los primeros 2 minutos?</label>
            <input class="form4item1radio1" type="radio" name="question1" id="a" value="Accept">
            <input class="form4item1radio2" type="radio" name="question1" id="b" value="Reject">
            <textarea class="form4item1comment" placeholder="Escribe tus notas aquí"></textarea>

我所能得到的只是一个计数器，显示选中的单选按钮的数量，这很接近但不是我需要的。我是 JavaScript 的初学者，所以虽然我意识到我还有很多东西要学，但我们将不胜感激。

在此先感谢您的帮助。

Answer 1

您需要在标签中放入 id 以显示每个 label 的百分比。而您已经制作的 jquery change 函数是计算每个答案被点击的单选按钮的次数的操作。

这里是文件js中的jquery函数：

$("input[type=radio]").change(function () {
      let valueButton = $(":radio:checked").val();
      let totalChecked = $(":radio:checked").length;
      let totalAccept = $('input[value="Accept"]:radio:checked').length;
      let totalReject = $('input[value="Reject"]:radio:checked').length;
      $("#showAccept").text((totalAccept / totalChecked) * 100+"%");
      $("#showReject").text((totalReject / totalChecked) * 100+"%");
      // console.log(valueButton);
      // console.log(totalChecked);
      // console.log(totalAccept);
      // console.log(totalReject);
    });

显示每个答案多少百分比的label，在标签中添加一些id：

<section>
  <h2>Cumplimiento 1</h2>
  <form class="form3">
    <fieldset class="Compliance">
      <label class="form3header1" for="complianceperc">Cumplimiento (%)</label>
      <span class="percentage" type="number" id="complianceperc" name="complianceperc"></span>

      <label class="form3item1" for="yescount">Sí (cantidad)</label>
      <span id="showAccept" class="counter">0</span>
      <label class="form3item2" for="yescount">No (cantidad)</label>
      <span class="counter" id="showReject">0</span>
    </fieldset>
  </form>
</section>

我在这种情况下添加了两个输入，以正确显示标签百分比运行：

<!-- 1 -->
<label class="form4item1">1. ¿El Asesor de Servicio comienza a atender al Cliente en los primeros 2 minutos?</label>
<input class="form4item1radio1" type="radio" name="question1" id="a" value="Accept">
<input class="form4item1radio2" type="radio" name="question1" id="b" value="Reject">
<textarea class="form4item1comment" placeholder="Escribe tus notas aquí"></textarea>

<!-- 2 -->
<br>
<label class="form4item1">1. ¿El Asesor de Servicio comienza a atender al Cliente en los primeros 2 minutos?</label>
<input class="form4item1radio1" type="radio" name="question2" id="a" value="Accept">
<input class="form4item1radio2" type="radio" name="question2" id="b" value="Reject">
<textarea class="form4item1comment" placeholder="Escribe tus notas aquí"></textarea>

这里是代码的整体：

$("input[type=radio]").change(function () {
  let valueButton = $(":radio:checked").val();
  let totalChecked = $(":radio:checked").length;
  let totalAccept = $('input[value="Accept"]:radio:checked').length;
  let totalReject = $('input[value="Reject"]:radio:checked').length;
  $("#showAccept").text((totalAccept / totalChecked) * 100+"%");
  $("#showReject").text((totalReject / totalChecked) * 100+"%");
  // console.log(valueButton);
  // console.log(totalChecked);
  // console.log(totalAccept);
  // console.log(totalReject);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <h2>Cumplimiento 1</h2>
  <form class="form3">
    <fieldset class="Compliance">
      <label class="form3header1" for="complianceperc">Cumplimiento (%)</label>
      <span class="percentage" type="number" id="complianceperc" name="complianceperc"></span>
      
      <label class="form3item1" for="yescount">Sí (cantidad)</label>
      <span id="showAccept" class="counter">0</span>
      
      <label class="form3item2" for="yescount">No (cantidad)</label>
      <span class="counter" id="showReject">0</span>
    </fieldset>
  </form>
</section>

<!-- Label 1 -->
<label class="form4item1">1. ¿El Asesor de Servicio comienza a atender al Cliente en los primeros 2 minutos?</label>
<input class="form4item1radio1" type="radio" name="question1" id="a" value="Accept">
<input class="form4item1radio2" type="radio" name="question1" id="b" value="Reject">
<textarea class="form4item1comment" placeholder="Escribe tus notas aquí"></textarea>

<!-- Label 2 -->
<br>
<label class="form4item1">1. ¿El Asesor de Servicio comienza a atender al Cliente en los primeros 2 minutos?</label>
<input class="form4item1radio1" type="radio" name="question2" id="a" value="Accept">
<input class="form4item1radio2" type="radio" name="question2" id="b" value="Reject">
<textarea class="form4item1comment" placeholder="Escribe tus notas aquí"></textarea>

使用 JavaScript 为单选按钮中的 "yes" 和 "no" 选择创建一个计数器

Create a counter for "yes" and "no" selections from radio buttons using JavaScript

javascript

html

forms

function

input