calling a jquery function using onClick

Question

I want to use jquery to do something depending on which checkbox is clicked. For some reason the onClick even is not being triggered for any of these checkboxes below.

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <SCRIPT language="javascript">

    $(document).ready(function() {      
       $("#group1").click(function() {
         $('.group1').attr('checked', this.checked);
       });
     });  

    function checkGroup (id ) {
        // ...
        // do anything you want here
        alert ("id: "+id+" "name: " + id.name);
        //...
    }


</script>
<script type="text/javascript">                                 

</script>   

<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>

<a href="">Link</a>

<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
    <tr>
        <th><input type="checkbox" id="group1" name="master" onClick="javascript:checkGroup('group1');"/></th>
        <th>Cell phone</th>
        <th>Rating</th>
    </tr>       
    <tr>
        <th><input type="checkbox" id="group2" name="master" onClick="javascript:checkGroup('group2');"/></th>
        <th>Cell phone</th>
        <th>Rating</th>
    </tr>

</table>     
</BODY>

EDIT

Ok i have updated it as shown below. It works for the first group of checkboxes but not for the second group.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <SCRIPT language="javascript">

    $(document).ready(function() {      
       $("#masterCheckBox").click(function() {
         $('.' + $(this).attr('class')).attr('checked', this.checked);
       });
     }); 

</script>

<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>

<a href="">Link</a>

<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
    <tr>
        <th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
        <th>Master</th>
        <th>Rating</th>
    </tr>
    <tr>
        <th><input type="checkbox" id="child1" class="master1" name="child"/></th>
        <th>Child</th>
        <th>Rating</th>
    </tr>
    <tr>
        <th><input type="checkbox" id="child1" class="master1" name="child"/></th>
        <th>Child</th>
        <th>Rating</th>
    </tr>           
</table>     
<table border="1">
    <tr>
        <th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
        <th>Master</th>
        <th>Rating</th>
    </tr>
    <tr>
        <th><input type="checkbox" id="child1" class="master2" name="child"/></th>
        <th>Child</th>
        <th>Rating</th>
    </tr>
    <tr>
        <th><input type="checkbox" id="child1" class="master2" name="child"/></th>
        <th>Child</th>
        <th>Rating</th>
    </tr>           
</table>     

</BODY>
</HTML>

EDIT

Ok i here is another update. It now works for different groups of checkboxes using the class element. The if statement only triggers the event if the checkbox is a master checkbox.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <SCRIPT language="javascript">

        $(document).ready(function() {      
            $('input[type=checkbox]').click(function() {
                if($(this).attr('name')=='master'){
                    $('.' + $(this).attr('class')).attr('checked', this.checked);   
                }                       
            });
         });        

    </script>

    <title>Multiple Checkbox Select/Deselect - DEMO</title>
    </head>
    <body>

    <a href="">Link</a>

    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
    <table border="1">
        <tr>
            <th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
            <th>Master</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master1" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master1" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>           
    </table>     
    <table border="1">
        <tr>
            <th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
            <th>Master</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master2" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master2" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>           
    </table>     

    </BODY>
    </HTML>

Now i need to change it so that if a child checkbox for a particular group is unchecked, i need to check that the master checkbox is only checked if at least one of the child checkboxes is checked.

Edit

Ok here is another update with a working version of what i am trying to achieve.

When the master checkbox is clicked, all its child checkboxes are checked
When any child checkbox is clicked, its corresponding master is also checked
When a child is unchecked, its corresponding master will be unchecked if there is no other checked child in the same group.

Please suggest any tips/hints of how this can be improved.

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <SCRIPT language="javascript">

        $(document).ready(function() {      
            $('input[type=checkbox]').click(function() {
                if($(this).attr('name')=='master'){
                    $('.' + $(this).attr('class')).attr('checked', this.checked);   
                }
                if($(this).attr('name')=='child'){

                    var childChecked = false;

                    $('.' + $(this).attr('class')).each(function(){
                        if (this.checked && this.name=="child"){
                            childChecked=true;
                        }                       
                    });

                    if (childChecked==false){
                        $('.' + $(this).attr('class')).each(function(){
                            if (this.name=='master'){
                                this.checked = childChecked;    
                            }                       
                        });
                    }else{
                        $('.' + $(this).attr('class')).each(function(){
                            if (this.name=='master'){
                                this.checked = childChecked;    
                            }                       
                        });
                    }

                }               
            });
         });        

</script>
<title>Multiple Checkbox Select/Deselect - DEMO</title>
</head>
<body>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
        <tr>
            <th><input type="checkbox" id="masterCheckBox" name="master" class="master1"/></th>
            <th>Master</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master1" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master1" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>           
</table>     
    <table border="1">
        <tr>
            <th><input type="checkbox" id="masterCheckBox" name="master" class="master2"/></th>
            <th>Master</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master2" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>
        <tr>
            <th><input type="checkbox" id="child1" class="master2" name="child"/></th>
            <th>Child</th>
            <th>Rating</th>
        </tr>           
</table>    
</BODY>
</HTML>

Just saw the update. It's your use of id. id's must be unique. Instead of an id, use a class: <input ... class="masterCheckBox" ... /> and $(".masterCheckBox") — Joseph Marikle
– Joseph Marikle, Commented Oct 7, 2011 at 15:01

Joseph Marikle · Accepted Answer · 2011-10-07 13:18:01Z

5

alert ("id: "+id+" "name: " + id.name);

is malformed. Your concatenation is off. try this:

alert ("id: "+id+" name: " + id.name);

EDIT:

also as a side note, you probably intended to get the element with the id and then access the name attribute:

http://jsfiddle.net/L5FgR/

    var element = document.getElementById(id);
    alert ("id: "+id+" name: " + element.name);

answered Oct 7, 2011 at 13:18

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ziggy Over a year ago

Thanks Joseph. I am trying to use Jquery to get the element using the id and print the elements id and its name. I want to use these to check other checkboxes which have class elements that are the same as the id passed as the paramter to the function.

Diodeus - James MacFarlane · Accepted Answer · 2011-10-07 13:22:25Z

2

1) You don't need to specify "javascript:", What else would it be? This doesn't break your code, it's just bad form.

<input type="checkbox" id="group1" name="master" onClick="javascript:checkGroup('group1');"/>

2) alert ("id: "+id+" "name: " + id.name); should be:

alert ("id: "+id+" name: " + id.name);

3)

$("#group1").click(function() {
         $('.group1').attr('checked', this.checked);
       });

here you specify '#group1' (which addresses an ID) then '.group1' which addresses an class name, which isn't even present in your page.

answered Oct 7, 2011 at 13:22

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

ziggy Over a year ago

the .group1 refers to the checkboxes i want to 'check' (not shown). Is there any way i can modify #group1 so that it is dynamic? i.e. passed via a parameter?

Diodeus - James MacFarlane Over a year ago

You can use: $('.'+$this).attr('id')).... - which will make a class name from the ID of the clicked item. #myId = .myId

Design by Adrian · Accepted Answer · 2011-10-07 15:07:48Z

1

Please don't mix inline code with your jquery functions.

Still, you would have to have the click event in an each() loop. Otherwise you might risk getting events for all checkboxes.

<input type="checkbox" id="check1" class="checkbox"></input>
<input type="checkbox" id="check2" class="checkbox"></input>

$(".checkbox").each(function(){
    $(this).click(function(){
        alert($(this).attr('id'));
    });
});

answered Oct 7, 2011 at 15:07

Design by Adrian

2,2371 gold badge22 silver badges23 bronze badges

1 Comment

ziggy Over a year ago

See the update - I included an if statement to ensure that only the master checkbox triggers the change.

Indigenuity · Accepted Answer · 2011-10-13 19:03:15Z

1

Two things:

Like Joseph said in his comment, ids are supposed to be unique, so you need to change it to a class. You can have multiple classes on one tag, like this:
```
<input type="checkbox" class="masterCheckBox master1" name="master"/>
```
Second, rather than using a click event for a checkbox, use the onChange() event:
```
$("#masterCheckBox").change(function() {...});
```
This is because users can change inputs using things like a mouse. I use spacebar all the time on web forms so I don't have to move my hands to the mouse.

edited Oct 13, 2011 at 19:03

answered Oct 7, 2011 at 15:18

Indigenuity

9,8306 gold badges42 silver badges71 bronze badges

Collectives™ on Stack Overflow

calling a jquery function using onClick

EDIT

EDIT

Edit

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

EDIT

Edit

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related