jeudi 3 août 2017

How to select only 1 checkbox from each paragraph?

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: enter image description here

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