获取所选项目的值

时间：2018-06-04 07:17:08

标签： javascript jquery

我有两种类型的答案：final和draft。并且有两种可能的预定义类型的答案：single choice (radio buttons)和multiple choice (checkboxes)。我想要做的是通过在字符串变量中连接它们来查看将要查看的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.有人可以提出什么问题？或者也许是解决问题的更好方法？

2 个答案:

答案 0 :(得分：0)

首先，ID上的DOM必须是唯一的，然后选择radio类型的输入并使用某些指定的名称

$("input[type='radio'][name='finalSingleChoice_10']")

以下是如何做到这一点的演示

＆＃13;
＆＃13; 
$(".test").click(function(){
   
   var val1= $("input[type='radio'][name='finalSingleChoice_10']:checked").val();
   var val2= $("input[type='radio'][name='draftSingleChoice_10']:checked").val();
   
   console.log(val1+ " "+ val2)
})
＆＃13; 
<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" >
        <label class="checkbox">
            <input id="finalSingleChoice_101" name="finalSingleChoice_10" type="radio" value="finalSingleChoice_101">
            <span>Option 1</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="finalSingleChoice_102" name="finalSingleChoice_10" type="radio" value="finalSingleChoice_102">
            <span>Option 2</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="finalSingleChoice_103" name="finalSingleChoice_10" type="radio" value="finalSingleChoice_103">
            <span>Option 3</span>
        </label>
        <br>
    </div>
</div>
DRAFT single:
<div id="draftAnswers_10">
    <div id="PossibleOptions_10" >
        <label class="checkbox">
            <input id="draftSingleChoice_101" name="draftSingleChoice_10" type="radio" value="draftSingleChoice_101">
            <span>Option 1</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="draftSingleChoice_102" name="draftSingleChoice_10" type="radio" value="draftSingleChoice_102">
            <span>Option 2</span>
        </label>
        <br>
        <label class="checkbox">
            <input id="draftSingleChoice_103" name="draftSingleChoice_10" type="radio" value="draftSingleChoice_103">
            <span>Option 3</span>
        </label>
        <br>
    </div>
</div>
<br/>
<br/>
 

<button class="test">Test</button>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

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

...并以这个简单的片段结束：

＆＃13;
＆＃13; 
// 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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望它有所帮助！

相关问题
最新问题