在多个复选框中,如何存储一个答案 JQuery Mobile
in multiple checkbox , how store one answer JQuery Mobile
我每页有多个问题。问题是如果我回答第一个问题,然后当我检查第二个问题的答案时,第一个问题的答案将被取消选中,我的目标是每个问题只有一个答案并且答案将被存储。
$('input.answer').on('change', function() {
$('input.answer').not(this).prop('checked', false);
$('input.answer').not(this).prop('checked', false).checkboxradio("refresh");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet"/>
<div class = "question">
<form>
<fieldset data-role="controlgroup">
<legend for="0-0">my goal is having one answer per each question?to reporduce check three in first question and then check seven in second question , you would see the first question three would be unchecked which is not my desire</legend>
<label for="0-0-4">one</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-4" id="0-0-4" value="4">
<label for="0-0-3">two</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-3" id="0-0-3" value="3">
<label for="0-0-2">three</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-2" id="0-0-2" value="2">
<label for="0-0-1">four</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-1" id="0-0-1" value="1">
<label for="0-0-0">five</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-0" id="0-0-0" value="0">
</fieldset>
</form>
</div>
<div class="question">
<form>
<fieldset data-role="controlgroup">
<legend for="1-0">this is second question but when i check any answer from first question then check one of the answer of second question , first question's answer will be uncheck which is undesired.</legend>
<label for="0-1-4">six</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-4" id="0-1-4" value="4">
<label for="0-1-3">seven</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-3" id="0-1-3" value="3">
<label for="0-1-2">eight</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-2" id="0-1-2" value="2">
<label for="0-1-1">nine</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-1" id="0-1-1" value="1">
<label for="0-1-0">ten</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-0" id="0-1-0" value="0">
</fieldset>
</form>
</div>
<div class="question">
<form>
<fieldset data-role="controlgroup">
<legend for="1-1">to reporduce check three in first question and then check seven in second question , you would see the first question three would be unchecked which is not my desire</legend>
<label for="1-1-4">eleven</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-4" id="1-1-4" value="4">
<label for="1-1-3">twelve</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-3" id="1-1-3" value="3">
<label for="1-1-2">thirteen</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-2" id="1-1-2" value="2">
<label for="1-1-1">fourteen</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-1" id="1-1-1" value="1">
<label for="1-1-0">fifteen</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-0" id="1-1-0" value="0">
</fieldset>
</form>
</div>
在您的 jquery 代码中,您必须指明仅使用所选复选框的字段集...
$('input.answer').on('change', function() {
$(this).closest('fieldset').find('input.answer').not(this).prop('checked',false).checkboxradio("refresh");
});
希望对你有帮助
我每页有多个问题。问题是如果我回答第一个问题,然后当我检查第二个问题的答案时,第一个问题的答案将被取消选中,我的目标是每个问题只有一个答案并且答案将被存储。
$('input.answer').on('change', function() {
$('input.answer').not(this).prop('checked', false);
$('input.answer').not(this).prop('checked', false).checkboxradio("refresh");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet"/>
<div class = "question">
<form>
<fieldset data-role="controlgroup">
<legend for="0-0">my goal is having one answer per each question?to reporduce check three in first question and then check seven in second question , you would see the first question three would be unchecked which is not my desire</legend>
<label for="0-0-4">one</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-4" id="0-0-4" value="4">
<label for="0-0-3">two</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-3" id="0-0-3" value="3">
<label for="0-0-2">three</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-2" id="0-0-2" value="2">
<label for="0-0-1">four</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-1" id="0-0-1" value="1">
<label for="0-0-0">five</label>
<input class="answer answer-num-0" type="checkbox" name="0-0-0" id="0-0-0" value="0">
</fieldset>
</form>
</div>
<div class="question">
<form>
<fieldset data-role="controlgroup">
<legend for="1-0">this is second question but when i check any answer from first question then check one of the answer of second question , first question's answer will be uncheck which is undesired.</legend>
<label for="0-1-4">six</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-4" id="0-1-4" value="4">
<label for="0-1-3">seven</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-3" id="0-1-3" value="3">
<label for="0-1-2">eight</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-2" id="0-1-2" value="2">
<label for="0-1-1">nine</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-1" id="0-1-1" value="1">
<label for="0-1-0">ten</label>
<input class="answer answer-num-1" type="checkbox" name="0-1-0" id="0-1-0" value="0">
</fieldset>
</form>
</div>
<div class="question">
<form>
<fieldset data-role="controlgroup">
<legend for="1-1">to reporduce check three in first question and then check seven in second question , you would see the first question three would be unchecked which is not my desire</legend>
<label for="1-1-4">eleven</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-4" id="1-1-4" value="4">
<label for="1-1-3">twelve</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-3" id="1-1-3" value="3">
<label for="1-1-2">thirteen</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-2" id="1-1-2" value="2">
<label for="1-1-1">fourteen</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-1" id="1-1-1" value="1">
<label for="1-1-0">fifteen</label>
<input class="answer answer-num-4" type="checkbox" name="1-1-0" id="1-1-0" value="0">
</fieldset>
</form>
</div>
在您的 jquery 代码中,您必须指明仅使用所选复选框的字段集...
$('input.answer').on('change', function() {
$(this).closest('fieldset').find('input.answer').not(this).prop('checked',false).checkboxradio("refresh");
});
希望对你有帮助