I am working on html survey page and the requirement is to select only 1 checkbox from each row of survey, Survey options might be different, see the screen and html below:
HTML Used
<div class="firstrow"><div class="srno"><p>1.</p></div><div class="survey"><span>I am satisfied with the quality, reliability and speed of the computer I use.</span></div></div>
<div class="options">
<span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
<span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
<span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
<span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
</div>
<div class="firstrow"><div class="srno"><p>2.</p></div><div class="survey"><span>The Software currently installed on my computer is adequate for my job function.</span></div></div>
<div class="options">
<span class="optpadding"><input type="checkbox" name="Strongly agree" value="Strongly agree"><span>Strongly agree</span></span>
<span class="optpadding"><input type="checkbox" name="Agree" value="Agree"><span>Agree</span></span>
<span class="optpadding"><input type="checkbox" name="Disagree" value="Disagree"><span>Disagree</span></span>
<span class="optpadding"><input type="checkbox" name="Strongly disagree" value="Strongly disagree"><span>Strongly disagree</span></span>
</div>
How can I achieve this using jquery, I have tried a lot but got success when there is only 1 survey question. when I select another question checkbox this will remove previous question selected checkbox.
Jquery Used
$(function () {
$('input:checkbox').click(function () {
if ($(this).is(':checked')) {
$('input:checkbox').not(this).prop('checked', false);
}
});
})
How to fix this problem?
Aucun commentaire:
Enregistrer un commentaire