添加选中的单选按钮数量（在 php/js 中）

Question

我有 5 组单选按钮，set1、set2、set3、set4、set5。每个值都是是/否。

我需要在隐藏的文本框中显示“是”的数量..即 1、2、3、4 或 5，并且随着人们选择不同的选项而明显改变..

<input type="radio" name="set1" id="set1_no" value="no">
<input type="radio" name="set1" id="set1_yes" value="yes">

<input type="radio" name="set2" id="set2_no" value="no">
<input type="radio" name="set2" id="set2_yes" value="yes">

<input type="radio" name="set3" id="set3_no" value="no">
<input type="radio" name="set3" id="set3_yes" value="yes">

<input type="radio" name="set4" id="set4_no" value="no">
<input type="radio" name="set4" id="set4_yes" value="yes">

<input type="radio" name="set5" id="set5_no" value="no">
<input type="radio" name="set5" id="set5_yes" value="yes">


<input type="hidden" name="number_of_yes" value="" readonly="readonly">

Answer 1

鉴于您正在设置一个隐藏字段（顺便说一下，它不需要是只读的，因为它是......嗯......隐藏）我可能只会更新它 onsubmit 的 @987654324 @。如果您真的需要随时更新它，只需使用onclick 或onchange。无论你触发它，你都可以尝试这样的事情：

yourForm.onsubmit = setYesCount;

function setYesCount() {
  var count = 0;

  // could use yourForm.getElementsByTagName(),
  // but since the OP didn't provide surrounding HTML:
  var els = document.getElementsByTagName("input");
  for (var i=0; i < els.length; i++) {
    if (els[i].type === "radio" && els[i].checked && els[i].value === "yes")
      count++;
  }
  // add an id attribute to the hidden input
  // for the following to work
  document.getElementById("number_of_yes").value = count;
}

（如果我不说，其他人会这样做：你可以用 jQuery 在一两行代码中做到这一点。）

编辑：jQuery 版本 - 我再次将它放在表单的提交事件中（我假设您有一个表单并且可以填写 id）。如果需要，您可以将其更改为更改或单击事件。

$(document).ready(function() {
  $("#yourFormsId").submit(function() {
         $('input[name="number_of_yes"]').val(
            $('input:checked[type="radio"][value="yes"]').length);
  });
});

Answer 2

您可以在单击 NO 或 YES 时使用 javascript 来维护计数器变量。为所有 NO 和 YES 按钮定义一个类

我会想象做这样的事情

var ctr = 0;
$(document).ready( function($) {
     $(".noradio").click((function () {
                 if (ctr != 0)
                 {
                     ctr--;
                 }
           })
     $(".yesradio").click()(function () {
                     ctr++;
           })
     $('input[name=hiddeninputname]').val(ctr);
});