时间戳

首页 > 解决方案 > 左右未选中的单选按钮的总和值

javascript - 左右未选中的单选按钮的总和值

问题描述

下面的代码给了我所选单选按钮的值的总和。它工作正常。

但现在我想要的是左右没有选择哪个选项，那么它应该为每个问题求和值 2。休息应该是相同的，最喜欢的是加3，最不喜欢的是加1。我尝试了很多选项，但无法实现我的目标。

我的单选按钮处于垂直位置。

例如：如果我在两个问题中都选择了最喜欢的第一个选项和最不喜欢的第三个选项，那么在两个问题中都未选中第二个选项。现在它应该给出这样的结果：

网络：4 sum_Recognition：6 sum_KnowledgeSeeking：2

我得到的认可和知识寻求的结果绝对完美......但我不知道如何计算网络，因为它是未经检查的选项。

$("input[type='radio']").change(function() {

  var sum_Networking = 0;

  var sum_Recognition = 0;

  var sum_KnowledgeSeeking = 0;






  var get_Networking = $("input[type='radio'][data-id=Networking]:checked").each(function() {
    sum_Networking += Math.ceil($(this).val());

  });


  var get_Recognition = $("input[type='radio'][data-id=Recognition]:checked").each(function() {
    sum_Recognition += Math.ceil($(this).val());
  });

  var get_KnowledgeSeeking = $("input[type='radio'][data-id=KnowledgeSeeking]:checked").each(function() {
    sum_KnowledgeSeeking += Math.ceil($(this).val());
  });


  alert("Networking: " + sum_Networking + ",\n sum_Recognition: " + sum_Recognition + ",\n sum_KnowledgeSeeking: " + sum_KnowledgeSeeking)
});
.row-div {
  display: flex;
  justify-content: center;
  border: 1px solid silver;
  padding: 4px;
}

.fix-div1 {
  width: 20%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fix-div2 {
  width: 60%;
  text-align: center;
}

.fix-div3 {
  width: 20%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multisteps-form__panel shadow rounded bg-white js-active" data-animation="slideHorz">
  <div class="bg-gray-light p-3 mb-4 pb-4 ">
    <h3 class="profile-username">
      Question 1: As you are in the arms of your dream, what motivates you the most to achieve your dream?




    </h3>
    <div class="multisteps-form__content">

      <div class="row ">
        <div class="col-md-6 mt-3">
          <div class="row-div">

            <div class="fix-div1">
              Most Preferred

            </div>

            <div class="fix-div2">

            </div>

            <div class="fix-div3">
              Least Preferred

            </div>

          </div>

          <div class="row-div mt-2">

            <div class="fix-div1">

              <div class="custom-control custom-radio">

                <input class="custom-control-input" type="radio" id="Q_1_rb_left_1" name="Left_1" value="3" data-id="Recognition">
                <label for="Q_1_rb_left_1" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

            <div class="fix-div2">
              Status symbol
            </div>

            <div class="fix-div3">

              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb_right_1" name="Right_1" value="1" data-id="Recognition">
                <label for="Q_1_rb_right_1" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

          </div>

          <div class="row-div mt-2">

            <div class="fix-div1">

              <div class="custom-control custom-radio">

                <input class="custom-control-input" type="radio" id="Q_1_rb_left_2" name="Left_1" value="3" data-id="Networking">
                <label for="Q_1_rb_left_2" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

            <div class="fix-div2">
              An opportunity to be a part of various groups

            </div>

            <div class="fix-div3">

              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb_right_2" name="Right_1" value="1" data-id="Networking">
                <label for="Q_1_rb_right_2" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

          </div>
          <div class="row-div mt-2">

            <div class="fix-div1">

              <div class="custom-control custom-radio">

                <input class="custom-control-input" type="radio" id="Q_1_rb_left_3" name="Left_1" value="3" data-id="KnowledgeSeeking">
                <label for="Q_1_rb_left_3" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

            <div class="fix-div2">
              The challenges involved in the project


            </div>

            <div class="fix-div3">

              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_1_rb_right_3" name="Right_1" value="1" data-id="KnowledgeSeeking">
                <label for="Q_1_rb_right_3" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

          </div>


        </div>








      </div>




    </div>
  </div>

  <div class=" p-3 pb-4 ">
    <h3 class="profile-username">
      Question 2: I would like to operate this way when working towards my dreams…




    </h3>
    <div class="multisteps-form__content">

      <div class="row ">
        <div class="col-md-6 mt-3">
          <div class="row-div">

            <div class="fix-div1">
              Most Preferred

            </div>

            <div class="fix-div2">

            </div>

            <div class="fix-div3">
              Least Preferred

            </div>

          </div>

          <div class="row-div mt-2">

            <div class="fix-div1">

              <div class="custom-control custom-radio">

                <input class="custom-control-input" type="radio" id="Q_2_rb_left_1" name="Left_2" value="3" @*data-id="Power" *@ data-id=Recognition>
                <label for="Q_2_rb_left_1" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

            <div class="fix-div2">
              I would be eager to be my own boss.

            </div>

            <div class="fix-div3">

              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_2_rb_right_1" name="Right_2" value="1" @*data-id="Power" *@ data-id=Recognition>
                <label for="Q_2_rb_right_1" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

          </div>

          <div class="row-div mt-2">

            <div class="fix-div1">

              <div class="custom-control custom-radio">

                <input class="custom-control-input" type="radio" id="Q_2_rb_left_2" name="Left_2" value="3" @*data-id="SocialService" *@ data-id=Networking>
                <label for="Q_2_rb_left_2" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

            <div class="fix-div2">
              I would be eager to voluntarily support others.


            </div>

            <div class="fix-div3">

              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_2_rb_right_2" name="Right_2" value="1" @*data-id="SocialService" *@ data-id=Networking>
                <label for="Q_2_rb_right_2" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

          </div>
          <div class="row-div mt-2">

            <div class="fix-div1">

              <div class="custom-control custom-radio">

                <input class="custom-control-input" type="radio" id="Q_2_rb_left_3" name="Left_2" value="3" @*data-id="CreativityAndInnovation" *@ data-id=KnowledgeSeeking>
                <label for="Q_2_rb_left_3" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

            <div class="fix-div2">
              I would be eager to try out something unique.



            </div>

            <div class="fix-div3">

              <div class="custom-control custom-radio">
                <input class="custom-control-input" type="radio" id="Q_2_rb_right_3" name="Right_2" value="1" @*data-id="CreativityAndInnovation" *@ data-id=KnowledgeSeeking>
                <label for="Q_2_rb_right_3" class="custom-control-label font-weight-normal">  </label>
              </div>
            </div>

          </div>


        </div>








      </div>




    </div>
  </div>

  <div class="bg-gray-light button-row d-flex mt-4 mb-4 p-4">

    <button class="btn btn-primary ml-auto js-btn-next" type="button" title="Next">Next</button>
  </div>
</div>

标签： javascriptjquery

解决方案

我的方法是逐个问题计算。

$(".multisteps-form__content").each(function() {
    var sum_n = 0;
    // sum checked values
    $(this).find("input[type='radio'][data-id=Networking]:checked").each(function() {
        sum_n += Math.ceil($(this).val());
    });
    // if none is checked, add 2
    sum_Networking += (sum_n == 0 ? 2 : sum_n);
    //same with recognition and the thid one

});

实现此目的的另一种方法还需要逐个问题检查，因此在实际适用于检查问题的代码末尾，您可以执行以下操作：

$(".multisteps-form__content").each(function() {
    if($(this).find("input[type='radio'][data-id=Networking]:checked").length==0) sum_Networking += 2;
    //same with recognition and the thid one

});

推荐阅读