使用onClick调用jquery函数

Question

使用onClick调用jquery函数

我想使用jquery来执行某些操作,具体取决于单击的复选框.出于某种原因,下面的任何复选框都没有触发onClick甚至.

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

Run Code Online (Sandbox Code Playgroud)

编辑

好的,我已经更新了它,如下所示.它适用于第一组复选框,但不适用于第二组复选框.

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

Run Code Online (Sandbox Code Playgroud)

编辑

好的,我这是另一个更新.它现在适用于使用class元素的不同复选框组.如果复选框是主复选框,则if语句仅触发事件.

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

Run Code Online (Sandbox Code Playgroud)

现在我需要更改它,以便如果取消选中特定组的子复选框,我需要检查是否仅检查主复选框是否至少选中了一个子复选框.

编辑

好的,这是另一个更新,其中包含我正在尝试实现的工作版本.

单击主复选框后,将检查其所有子复选框
单击任何子复选框时,还会检查其对应的主复选框
取消选中子项时,如果同一组中没有其他已检查子项,则将取消选中其对应的主控.

请提出任何有关如何改进的提示/提示.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*kle 5

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

Run Code Online (Sandbox Code Playgroud)

是畸形的你的连接已关闭.试试这个:

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

Run Code Online (Sandbox Code Playgroud)

编辑:

另外,作为旁注,您可能希望获取带有id的元素,然后访问name属性:

http://jsfiddle.net/L5FgR/

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，4 月前
查看次数：	3401 次
最近记录：	14 年，4 月前