使用 onClick 调用 jquery 函数

发布于 2024-12-08 16:33:00 字数 9374 浏览 1 评论 0原文

我想使用 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>

编辑

好的我这是另一个更新。现在，它适用于使用 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>

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

编辑

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

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

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

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

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ゝ偶尔ゞ 2024-12-15 16:33:00

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

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

回复收藏 0 原文

九八野马 2024-12-15 16:33:00

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'，它寻址类名，该类名甚至不存在于您的页面中。

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.

回复收藏 0 原文

睫毛溺水了 2024-12-15 16:33:00

请不要将内联代码与 jquery 函数混合。

尽管如此，您仍然必须在each() 循环中添加单击事件。否则，您可能会面临获取所有复选框事件的风险。

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

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

回复收藏 0 原文

聊慰 2024-12-15 16:33:00

两件事：

就像约瑟夫在评论中所说的那样，id 应该是唯一的，因此您需要将其更改为类。您可以在一个标签上拥有多个类，如下所示：
其次，不要对复选框使用单击事件，而是使用 onChange() 事件：
```
$("#masterCheckBox").change(function() {...});
```
这是因为用户可以使用鼠标等设备更改输入。我一直在 Web 表单上使用空格键，因此我不必将手移到鼠标上。

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.

回复收藏 0 原文

~没有更多了~