使用 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(基于stackoverflow中的其他答案(：

$('.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>