Check only one checkbox in each row-CodePudding

I want to be able to check only one checkbox out of 4 checkboxes using Jquery Javascript, I have multiple forms with 4 checkboxes in the same page generated by PHP, My approach is

<script>
        $('input.chk1').on('change', function() {
            $('input.chk1').not(this).prop('checked', false);
        });
        $('input.chk2').on('change', function() {
            $('input.chk2').not(this).prop('checked', false);
        });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="">
<input type="checkbox" id="chk1" class="chk1"/>
<input type="checkbox" id="chk2" class="chk1"/>
<input type="checkbox" id="chk3" class="chk1"/>
<input type="checkbox" id="chk4" class="chk1"/>
</form>


<form action="">
<input type="checkbox" id="chk1" class="chk2"/>
<input type="checkbox" id="chk2" class="chk2"/>
<input type="checkbox" id="chk3" class="chk2"/>
<input type="checkbox" id="chk4" class="chk2"/>
</form>

......

What is the best way to achieve this since I have so many forms each in a list of items?

CodePudding user response：

I have managed to use radio button instead of checkboxes

Also this solution fixed my problem: html select only one checkbox in a group