CODEWITHSUNDEEP
javascripthtml
Pedro Silva
Pedro Silva

Reputation: 51

check all the check box

I've created a table with a lot of checkbox's, but now I want to be able to use a "universal" checkbox.

Like this:

<tr>
      <th scope="row">Indice</th>
      <td><input type="checkbox" id="check1"></td>
      <td><input type="checkbox" id="check2"></td>
      <td><input type="checkbox" id="check3"></td>
      <td><button onclick="check()">Check Checkbox</button>
          <button onclick="uncheck()">Uncheck Checkbox</button></td>  
</tr>

Well I've done this on javascript: 

<script>
function check()
  {
  document.getElementById("check1").checked=true
  document.getElementById("check2").checked=true
  document.getElementById("check3").checked=true
  }
function uncheck()
  {
  document.getElementById("check1").checked=false
  document.getElementById("check2").checked=false
  document.getElementById("check3").checked=false
  }
function selectAll(frmElement, chkElement) {
    // ...
}
document.getElementById("check_all_1").onclick = function() {
    selectAll(document.wizard_form, this);
}
</script>

So far so good... but... the ideia is to have some results from a database, and there is no change I'm doing this javascript "check3", "check4" ... how should I do that?

Upvotes: 0

Views: 658

Answers (5)

David Thomas
David Thomas

Reputation: 253308

A simple plain-JavaScript (no library required) version:

function checks (){
    var button = this.className.indexOf('uncheckAll') === -1,
        row = this.parentNode.parentNode,
        inputs = row.getElementsByTagName('input');

    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = button;
        }
    }

}

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener('click', checks);
}

JS Fiddle demo.

The above amended to avoid having to explicitly traverse the DOM (which, using sequential parentNode.parentNode... requires an advance knowledge of the HTML structure), using a (simple) closest() shim:

HTMLElement.prototype.closest = function (tagName) {
    tagName = tagName.toLowerCase();
    var self = this,
        selfTag = self.tagName.toLowerCase();
    return selfTag == tagName ? self : self.parentNode.closest(tagName);
}

function checks (){
    var button = this.className.indexOf('uncheckAll') === -1,
        row = this.closest('tr'),
        inputs = row.getElementsByTagName('input');

    for (var i = 0, len = inputs.length; i < len; i++) {
        if (inputs[i].type == 'checkbox') {
            inputs[i].checked = button;
        }
    }

}

var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
    buttons[i].addEventListener('click', checks);
}

JS Fiddle demo.

References:

Upvotes: 1

Mr.Web
Mr.Web

Reputation: 7154

Try this

function selectAll(chkElement) {
  checkboxes = document.getElementsByName('n');
  for(var checkbox in checkboxes)
   checkbox.checked = chkElement.checked;
}

Where 'n' is the name

Upvotes: 3

always relax
always relax

Reputation: 94

try this. it will work static as we as dynamically.

<table>
     <tr id="trCheck">
         <td>
            <input type="checkbox" name="chk1" id="chk1"/>
            <input type="checkbox" name="chk2" id="chk2"/>
         </td>
     </tr>
     <tr>
         <td>
             <input type="button" name="btnSubmit" onclick="check();" value="Check/Uncheck" />
         </td>
     </tr>
</table>


function check() {

     if ($('#trCheck').find('[type="checkbox"]').attr('checked') == false)
         $('#trCheck').find('[type="checkbox"]').attr('checked', true);
     else
         $('#trCheck').find('[type="checkbox"]').attr('checked', false);

 }

Upvotes: 1

Chirag Vidani
Chirag Vidani

Reputation: 2577

Try this

<table>
<tr>
    <th scope="row">
        <input type="checkbox" id="checkAll" onclick="javascript: return CheckAllCheckboxes(this); ">
    </th>
    <tr>
        <td>
            <input type="checkbox" id="check1">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="check2">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="check3">
        </td>
    </tr>

JS

CheckAllCheckboxes = function (current) {
   var state = $(current).is(':checked');
   $('input[type="checkbox"]').each(function () {
      $(this).attr('checked', state);
   });
};

You can check fiddle demo

Another option

With jQuery click event

$(':checkbox').not('#checkAll').change(function () {
    $("#checkAll").attr("checked", $(":checkbox").not(":checked").not("#checkAll").length ? false : true);
});
$("#checkAll").change(function () {
    $(':checkbox').attr('checked', this.checked);
});

You can check fiddle demo

Upvotes: 2

Joe
Joe

Reputation: 1

If the results are from a database, when you are looping through the database results and adding the checkbox to the page simply do...

<td><input type="checkbox" checked /></td>

Also, make sure you terminate the tag with a forward slash.

Upvotes: 0

Related Questions