javascript - 获取所选项目的值

Question

我有两种类型的答案:最终和草稿。有两种可能的预定义答案类型:单选(单选按钮) 和多选(复选框)。我想要做的是拥有一个 jQuery 函数，该函数将通过将所选答案连接在字符串变量中来查看它们。然后我将进一步处理这个变量。

以下是已完成操作的片段:

    function updateSelectedAnswer(id, answerType) {
        var result, selAnswers = [];
        if (answerType=='final'){
            var i = 0;
            $('#PossibleChoices_'+id).children('checkbox').each(function(){
                if ($('#finalMultiChoice_'+id).is(":checked") || $('#finalSingleChoice_'+id).is(":checked")) {
                    selAnswers[i] = $(this).find('span').val();
                    i++;
                }
            });
        }
        else {
                var  i = 0;
                $('#PossibleChoices_'+id).children('checkbox').each(function(){
                    if ($('#draftMultiChoice_'+id).is(":checked") || $('#draftSingleChoice_'+id).is(":checked")) {
                        selAnswers[i] = $(this).find('span').val();
                        i++;
                    }
                });
        }
        result = selAnswers.join('#');
    }

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
FINAL single:
<div id="finalAnswers_10">
    <div id="PossibleOptions_10" onchange="updateSelectedAnswer(10,'final');">
        <label class="checkbox">
            <input id="finalSingleChoice_10_1" name="finalSingleChoice_10" type="radio" value="{ class = choice }">
            <span>Option 1</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="finalSingleChoice_10_2" name="finalSingleChoice_10" type="radio" value="{ class = choice }">
            <span>Option 2</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="finalSingleChoice_10_3" name="finalSingleChoice_10" type="radio" value="{ class = choice }">
            <span>Option 3</span>
        </label>
        <br>
    </div>
</div>
DRAFT single:
<div id="draftAnswers_10">
    <div id="PossibleOptions_10" onchange="updateSelectedAnswer(10,'draft');">
        <label class="checkbox">
            <input id="draftSingleChoice_10_1" name="draftSingleChoice_10" type="radio" value="{ class = choice }">
            <span>Option 1</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="draftSingleChoice_10_2" name="draftSingleChoice_10" type="radio" value="{ class = choice }">
            <span>Option 2</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="draftSingleChoice_10_3" name="draftSingleChoice_10" type="radio" value="{ class = choice }">
            <span>Option 3</span>
        </label>
        <br>
    </div>
</div>
<br/>
<br/>
FINAL multiple:
<div id="finalAnswers_11">
    <div id="PossibleOptions_11" onchange="updateSelectedAnswer(11,'final');">
        <label class="checkbox">
            <input id="finalMultipleChoice_11_1" name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }">
            <span>Option 1m</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="finalMultipleChoice_11_2" name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }">
            <span>Option 2m</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="finalMultipleChoice_11_3" name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }">
            <span>Option 3m</span>
        </label>
        <br>
    </div>
</div>
DRAFT multiple:
<div id="draftAnswers_11">
    <div id="PossibleOptions_11" onchange="updateSelectedAnswer(11,'draft');">
        <label class="checkbox">
            <input id="draftMultipleChoice_11_1" name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }">
            <span>Option 1m</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="draftMultipleChoice_11_2" name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }">
            <span>Option 2m</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="draftMultipleChoice_11_3" name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }">
            <span>Option 3m</span>
        </label>
        <br>
    </div>
</div>

但是，问题是这些值在某种程度上总是 0。有人可以提出问题是什么吗？或者也许有更好的方法来解决这个问题？

Answer 1

我试图简化你的代码......

• 我删除了所有 id，并添加了 class="question" 以及自定义属性 qnum 和 qtype(问题编号和类型)，
• 我使用 $(this) 轻松管理刚刚更改的元素中的元素目标。

...最后得到了这个简单的片段:

// Using the class 'question' to make it easier,
$('.question').on('change', function() {
  var result = [];
  // Get the attributes I added in HTML
  var qnum = $(this).attr('qnum');
  var qtype = $(this).attr('qtype');

  // Do something for all inputs checked in the element that changed
  $(this).find("input:checked").each(function(i, elm){
    result[i] = $(elm).siblings('span').html();
  });
  result = result.join('#');
  
  // Output
  console.clear();
  console.log(qtype, qnum, 'updated with:', result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
FINAL single:
<div class="question" qnum="10" qtype="final">
  <label class="checkbox">
    <input name="finalSingleChoice_10" type="radio" value="{ class = choice }">
    <span>Option 1</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="finalSingleChoice_10" type="radio" value="{ class = choice }">
    <span>Option 2</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="finalSingleChoice_10" type="radio" value="{ class = choice }">
    <span>Option 3</span>
  </label>
  <br>
</div>
DRAFT single:
<div class="question" qnum="10" qtype="draft">
  <label class="checkbox">
    <input name="draftSingleChoice_10" type="radio" value="{ class = choice }">
    <span>Option 1</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="draftSingleChoice_10" type="radio" value="{ class = choice }">
    <span>Option 2</span>
    </label>
  <br>
  <label class="checkbox">
    <input name="draftSingleChoice_10" type="radio" value="{ class = choice }">
    <span>Option 3</span>
  </label>
  <br>
</div>
<br/> FINAL multiple:
<div class="question" qnum="11" qtype="final">
  <label class="checkbox">
    <input name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }">
    <span>Option 1m</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }">
    <span>Option 2m</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="finalMultipleChoice_11" type="checkbox" value="{ class = choice }">
    <span>Option 3m</span>
  </label>
</div>
DRAFT multiple:
<div class="question" qnum="11" qtype="draft">
  <label class="checkbox">
    <input name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }">
    <span>Option 1m</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }">
    <span>Option 2m</span>
  </label>
  <br>
  <label class="checkbox">
    <input name="draftMultipleChoice_11" type="checkbox" value="{ class = choice }">
    <span>Option 3m</span>
  </label>
</div>
<br><br>

希望对你有帮助!