CODEWITHSUNDEEP
javascriptjquery
Sandipan
Sandipan

Reputation: 219

How to check/uncheck checkboxes by clicking a hyperlink?

I have 11 checkboxes with individual ids inside a modal popup.I want to have a hyperlink called SelectAll,by clicking on which every checkbox got checked.I want this to be done by javascript/jquery.

Please show me how to call the function

Upvotes: 1

Views: 2072

Answers (5)

Sandipan
Sandipan

Reputation: 219

  function CheckUncheck(obj) {
        var pnlPrivacySettings = document.getElementById('pnlPrivacySettings');
        var items = pnlPrivacySettings.getElementsByTagName('input');
        var btnObj = document.getElementById('hdnCheckUncheck');
        if (btnObj.value == '0') {
            for (i = 0; i < items.length; i++) {
                if (items[i].type == "checkbox") {
                    if (!items[i].checked) {
                        items[i].checked = true;
                    }
                }
            }
            btnObj.value = "1";
        }
        else {
            for (i = 0; i < items.length; i++) {
                if (items[i].type == "checkbox") {
                    if (items[i].checked) {
                        items[i].checked = false;
                    }
                }
            }
            btnObj.value = "0";
        }
  }

Upvotes: 0

Jekis
Jekis

Reputation: 4685

$(function(){
    $('#link_id').click(function(e){
        e.preventDefault(); // unbind default click event
        $('#modalPopup').find(':checkbox').click(); // trigger click event on each checkbox
    });
});

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

This should work, clicking on the element (typically an input, but if you want to use a link remember to also add 'return false;' to prevent the page reloading/moving) with the id of 'selectAllInputsButton' should apply the 'selected="selected"' attribute to all inputs (refine as necessary) with a class name of 'modalCheckboxes'.

This is un-tested, writing on my phone away from my desk, but I think it's functional, if not pretty.

$(document).ready(
  function(){
    $('#selectAllInputsButton').click(
      function(){
        $('input.modalCheckboxes').attr('selected','selected');
      }
    );
  }
);

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382696

You can do like this in jquery:

$(function(){
 $('#link_id').click(function(){
  $('input[type="checkbox"]').attr('checked', 'checked');
  return false;
 });
});

If you have more than one form, you can specify form id like this:

$(function(){
 $('#link_id').click(function(){
  $('#form_id input[type="checkbox"]').attr('checked', 'checked');
  return false;
 });
});

Upvotes: 3

Darin Dimitrov
Darin Dimitrov

Reputation: 1038790

You could attach to the click event of the anchor with an id selectall and then set the checked attribute of all checkboxes inside the modal:

$(function() {
    $('a#selectall').click(function() {
        $('#somecontainerdiv input:checkbox').attr('checked', 'checked');
        return false;
    });
});

Upvotes: 8

Related Questions