计算具有特定数据 ID 的选定单选按钮的值的总和

Question

我有单选按钮，它们有不同的 data-id 和分配给每个单选按钮的值。我想计算 data-id=OriginalityOfIdeas 的选定单选按钮的值的总和。我想用jquery来做。我正在努力但无法实现我的目标。

我想在特定的 div 或类之间进行计数。

<div class="multisteps-form__content">
  <div class="row ">
    <div class="col-md-12 mt-3 align-items-center">
      <div class="form-group">
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_1_rb1" name="1" value="1" data-id="OriginalityOfIdeas">
          <label for="Q_1_rb1" class="custom-control-label font-weight-normal">The event should be organized in the same way as every year. </label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_1_rb2" name="1" value="3" data-id="OriginalityOfIdeas">
          <label for="Q_1_rb2" class="custom-control-label font-weight-normal">We could introduce some Virtual Reality games. </label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_1_rb3" name="1" value="2" data-id="OriginalityOfIdeas">
          <label for="Q_1_rb3" class="custom-control-label font-weight-normal">We could make it different and more engaging, but need to think about how. </label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_1_rb4" name="1" value="4" data-id="OriginalityOfIdeas">
          <label for="Q_1_rb4" class="custom-control-label font-weight-normal">We could invite some guest artists to perform during the day of the event.</label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_1_rb5" name="1" value="5" data-id="OriginalityOfIdeas">
          <label for="Q_1_rb5" class="custom-control-label font-weight-normal">We could invite ideas from students to showcase their unique talent not known to others.</label>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="multisteps-form__content">
  <div class="row ">
    <div class="col-md-12 mt-3 align-items-center">
      <div class="form-group">
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_2_rb1" name="2" value="2" data-id="Curiosity">
          <label for="Q_2_rb1" class="custom-control-label font-weight-normal">Gather some information about them </label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_2_rb2" name="2" value="4" data-id="Curiosity">
          <label for="Q_2_rb2" class="custom-control-label font-weight-normal">Know in detail about the diverse cultures </label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_2_rb3" name="2" value="3" data-id="Curiosity">
          <label for="Q_2_rb3" class="custom-control-label font-weight-normal">Gather information from my team members</label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_2_rb4" name="2" value="5" data-id="Curiosity">
          <label for="Q_2_rb4" class="custom-control-label font-weight-normal">Gather information from various sources </label>
        </div>
        <div class="custom-control custom-radio">
          <input class="custom-control-input" type="radio" id="Q_2_rb5" name="2" value="1" data-id="Curiosity">
          <label for="Q_2_rb5" class="custom-control-label font-weight-normal">Does not matter to me </label>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

                var dataID = "OriginalityOfIdeas";
                var checked = $("input[type='radio'][data-id='" + dataID + "']:checked");
                var sum = 0;
                for (var i = 0; i < checked.length; i++) {
                    sum += parseInt(checked.eq(i).attr("value"), 10);
                }

Answer 2

您可以通过对某个组中找到的单选按钮列表 (criterion:checked) 运行过滤函数来找到选中的单选项目（根据数据测试 id）。

但是，您将始终选择 1 个单选按钮或 0，因为这是单选按钮的工作方式，它不像复选框，选择另一个会导致前一个取消选择。

下面的代码应该可以帮助您：

function getSelectedRadioButtonAmount(dataId) {
  const arr = document.querySelectorAll(`[data-id=${dataId}]`);
  return Array.from(arr).filter(x => x.checked).length
}


document.getElementById('find-button').addEventListener('click', () => {
  const amount = getSelectedRadioButtonAmount('OriginalityOfIdeas');
  console.log('number of selected radios', amount)

})

<div class="multisteps-form__content">
        <button id="find-button">
          Find checked radios
        </button>
        
        <div class="row ">
          <div class="col-md-12 mt-3 align-items-center">
            <div class="form-group">
              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb1" name="1" value="1" data-id="OriginalityOfIdeas">
                <label for="Q_1_rb1" class="custom-control-label font-weight-normal">The event should be organized in the same way as every year. </label>
              </div>
              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb2" name="1" value="3" data-id="OriginalityOfIdeas">
                <label for="Q_1_rb2" class="custom-control-label font-weight-normal">We could introduce some Virtual Reality games. </label>
              </div>
              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb3" name="1" value="2" data-id="OriginalityOfIdeas">
                <label for="Q_1_rb3" class="custom-control-label font-weight-normal">We could make it different and more engaging, but need to think about how. </label>
              </div>
              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb4" name="1" value="4" data-id="OriginalityOfIdeas">
                <label for="Q_1_rb4" class="custom-control-label font-weight-normal">We could invite some guest artists to perform during the day of the event.</label>
              </div>
              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb5" name="1" value="5" data-id="OriginalityOfIdeas">
                <label for="Q_1_rb5" class="custom-control-label font-weight-normal">We could invite ideas from students to showcase their unique talent not known to others.</label>
              </div>
            </div>
          </div>