calling a jquery function using onClick_问答_开发者

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>

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);

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);

$("#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.

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'));
    });
});

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.