使用 onClick 调用 jquery 函数答案

【问题标题】：calling a jquery function using onClick使用 onClick 调用 jquery 函数
【发布时间】：2011-10-07 13:16:16
【问题描述】：

我想根据单击的复选框使用 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>

编辑

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

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

编辑

好的，这是另一个更新。它现在适用于使用类元素的不同复选框组。 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>

现在我需要更改它，以便如果未选中特定组的子复选框，我需要检查是否仅在选中至少一个子复选框时才选中主复选框。

编辑

好的，这是我想要实现的工作版本的另一个更新。

当主复选框被点击时，它的所有子复选框都被选中
当任何子复选框被点击时，其对应的主复选框也会被选中
当一个子节点未选中时，如果同一组中没有其他已选中的子节点，则其对应的主节点将被取消选中。

请就如何改进这一点提出任何提示/提示。

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

【问题讨论】：

刚看到更新。这是您对id 的使用。 id 必须是唯一的。使用类代替 id：<input ... class="masterCheckBox" ... /> 和 $(".masterCheckBox")

标签： javascript jquery checkbox

【解决方案1】：

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

格式错误。您的串联已关闭。试试这个：

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

编辑：

顺便说一句，您可能打算获取带有 id 的元素，然后访问 name 属性：

http://jsfiddle.net/L5FgR/

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

【讨论】：

谢谢约瑟夫。我正在尝试使用 Jquery 使用 id 获取元素并打印元素 id 及其名称。我想使用这些来检查其他复选框，这些复选框具有与作为参数传递给函数的 id 相同的类元素。

【解决方案2】：

1) 你不需要指定“javascript:”，还有什么？这不会破坏您的代码，只是形式不好。

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

2) alert ("id: "+id+" "name: " + id.name); 应该是：

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

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

在此处指定 '#group1'（用于处理 ID），然后指定 '.group1'，用于处理类名，该类名甚至不在您的页面中。

【讨论】：

.group1 指的是我想要“检查”的复选框（未显示）。有什么办法可以修改#group1 使其成为动态的吗？即通过参数传递？
您可以使用：$('.'+$this).attr('id')).... - 这将根据单击项目的 ID 创建一个类名。 #myId = .myId

【解决方案3】：

请不要将内联代码与您的 jquery 函数混合使用。

不过，您必须在 each() 循环中设置 click 事件。否则，您可能会冒险获得所有复选框的事件。

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

【讨论】：

查看更新 - 我包含了一个 if 语句以确保只有主复选框触发更改。

【解决方案4】：

两件事：

就像 Joseph 在他的评论中所说，id 应该是唯一的，因此您需要将其更改为一个类。您可以在一个标签上拥有多个类，如下所示：
```
<input type="checkbox" class="masterCheckBox master1" name="master"/>
```
其次，不要对复选框使用单击事件，而是使用 onChange() 事件：
```
$("#masterCheckBox").change(function() {...});
```
这是因为用户可以使用鼠标等工具更改输入。我在 Web 表单上一直使用空格键，因此我不必将手移到鼠标上。

【讨论】：