javascript - 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=".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=".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=".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=".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>

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./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./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./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./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>

Share Improve this question edited Oct 7, 2011 at 17:32 asked Oct 7, 2011 at 13:16 ziggy 15.9k69 gold badges198 silver badges291 bronze badges

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 Commented Oct 7, 2011 at 15:01

Add a ment |

4 Answers 4

Sorted by: Reset to default 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/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 ment, 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - calling a jquery function using onClick - Stack Overflow

EDIT

EDIT

Edit

EDIT

EDIT

Edit

4 Answers 4

与本文相关的文章

评论列表(0)