javascript - PHP JS allow one checkbox in group -

javascript - PHP JS allow one checkbox in group -

i've found various questions similar i'm looking do, js knowledge non-existent i'm unsure how code correctly. have few blocks of php looping output checkboxes 2 below:

<tr> <td class="first"> p/hol in lieu </td> <?php for( $x=1; $x<=14; $x++) { echo '<td class="checkbox checkbox'.$x.'"><input type="checkbox" name="phollieu'.$x.'" id="phollieu'.$x.'" tabindex="'.$x.'"></td>'."\n"; } ?> </tr> <tr> <td class="first"> public holiday </td> <?php for( $x=1; $x<=14; $x++) { echo '<td class="checkbox checkbox'.$x.'"><input type="checkbox" name="phol'.$x.'" id="phol'.$x.'" tabindex="'.$x.'"></td>'."\n"; } ?> </tr>

what create js loop runs through each grouping (hence class checkbox'.$x.' create sure each column has same identifier) , allows 1 checkbox per group.

i found code snippet in else's question, , when looking @ fiddle want do, i'm unsure how modify js loop. utilize static code want cut down code much possible readability, , know can way.

$('input:checkbox').click( function() { //if checked box in different grouping if($(this).attr('name') != $(this).siblings(':checked').attr('name')) { //remove checks apart grouping recent check has been made $(this).siblings(':checked').attr('checked', false); } });

this layout: screenshot

it seems want create checkboxes deed radio buttons, can't utilize radios because want vertical layout? can create them have vertical layout using css (don't inquire me how to it!), next want:

<!-- sample table --> <table> <tr> <td><input type="checkbox" name="col0"> <td><input type="checkbox" name="col1"> <td><input type="checkbox" name="col2"> <tr> <td><input type="checkbox" name="col0"> <td><input type="checkbox" name="col1"> <td><input type="checkbox" name="col2"> <tr> <td><input type="checkbox" name="col0"> <td><input type="checkbox" name="col1"> <td><input type="checkbox" name="col2"> </table> <script> // simple function add together click listeners function addclick() { var inputs = document.getelementsbytagname('input'); (var i=0, ilen=inputs.length; i<ilen; i++) { inputs[i].onclick = checkchecked; } } window.onload = addclick; // allow 1 checked checkbox per column function checkchecked() { var els = document.getelementsbyname(this.name); (var i=0, ilen=els.length; i<ilen; i++) { if (els[i] != this) els[i].checked = false; } } </script>

the above compatible every browser in use, ie 6 or further.

edit

btw, if nodelist interface supported iterators, next possible:

// add together simple each back upwards in browsers nodelist constructor if (typeof nodelist != 'undefined' && nodelist.prototype && !nodelist.prototype.each) { nodelist.prototype.each = function(fn) { (var i=0, ilen=this.length; i<ilen; i++) { fn(this[i], i, this); } } } // simple function add together click listeners function addclick() { document.queryselectorall('input[type=checkbox]').each(function(el){ el.onclick = checkchecked; }); } window.onload = addclick; // allow 1 checked checkbox per column function checkchecked() { var tgt = this; document.queryselectorall('[name=' + tgt.name + ']').each(function(el) { if (el != tgt) el.checked = false; }); }

i'm not suggesting above (altough works in modern browsers) it's not robust, particularly live nodelists or modified function, illustrates possibilities. 1 feature of libraries back upwards selectors, queryselector interface fixed that.

now it's time add together iterator nodelist inherited htmlcollection… :-)

javascript php jquery checkbox