如何在onclick上运行此脚本

时间:2013-01-25 21:56:48

标签: jquery onclick html-form

我很抱歉用这么简单的问题打扰你,但我看了很多地方,似乎无法弄清楚做我想做的事情的正确语法。

基本上我有一个包含大量复选框的表单,并希望允许用户同时检查所有复选框(或取消选中所有复选框)

我遇到了这个伟大的剧本

    $(function () {
    $('.checkall').click(function () {
        $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
});

但是当我尝试设置我的输入按钮的onclick事件来运行脚本时没有任何反应。

<input type="button" class="blkbuttonsmall" value="Toggle All/None" onclick="**what-do-i-use-here-to-run?**">

非常感谢任何帮助!

修改

所以我昨晚尝试了两个答案但没有成功。如果我身边有通讯错误,我不确定我是否还在做错事。所以这是我试过的不同的事情没有成功,还有关于如何设置页面的更多信息。

复选框和输入按钮每个都有自己的类,我用它来设置它们的样式。在对运行此脚本进行任何考虑之前,它们都是这样编码的。

选择所有按钮

<input type="button" class="blkbuttonsmall" value="Toggle All/None">

复选框

<input type="checkbox" name="X" id="X" class="formcheck">

所以现在采取昨晚提供的建议(再次感谢大家的快速回复)我试过 将Select All Button的类更改为'blkbuttonsmall checkall'和'checkall'。当这不起作用时,我尝试将'checkall'类应用于某些复选框,删除'formcheck'类并添加'checkall'类。依然没有。这让我相信我不能正确地执行事情,或者第一次在我的问题中没有正确解释。

以下是我的代码的一些HTML snipets,在我尝试任何修改之前

表格左边的div:

<div class="formleft">
<br />          
    <form action="">
        <span class="formtext">Check all that apply</span>
<br />
<br />
    <script>
    $(function () {
    $('.checkall').click(function () {
    $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
    });
    });
    </script>
        <fieldset>
        <input type="checkbox" name="logincheck" id="logincheck" class="formcheck"> login
        <br />
        <input type="checkbox" name="assignbreakbusylogoutcheck"  id="assignbreakbusylogoutcheck" class="formcheck"> assignment, break, busy, logout
        <br />
        <input type="checkbox" name="acceptprocesscallscheck" id="acceptprocesscallscheck" class="formcheck"> accept/process tasks, calls
        <br />
</div>

... 表格的右边界

<div class="formright">
<br />
<!-- when button is clicked we need to toggle all checks on or off -->
        <input type="button" class="blkbuttonsmall" value="Toggle All/None">
<br />
        <input type="checkbox" name="userprofilecheck" id="userprofilecheck" class="formcheck"> user profile
<br />
        <input type="checkbox" name="searchcheck" id="searchcheck" class="formcheck"> search
<br />
        <input type="checkbox" name="addcheck" id="addcheck" class="formcheck"> add
<br />
        <input type="checkbox" name="editcheck" id="editcheck" class="formcheck"> edit
        </fieldset>
     </form>
</div>

并且只是为了确保我不是一个搞砸jquery声明的ponce这里是文件的标题:

<head>
    <meta charset="utf-8">
    <title>web portal configurations</title>

       <link rel="icon" href="images/favicon.ico" type="image/x-ico">
       <link rel="stylesheet" type="text/css" href="css/style.css">
       <script type="text/javascript" src="js/jquery.js"></script>
       <meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=1">
</head>

jquery文件是jquery网站上提供的最新缩小版本,只是本地上传到我的服务器。

我在这里错过了什么或做错了什么?我理解以前的回答的概念,所以问题必须是我错过的或实施。再次,我感谢任何提供的帮助!

1 个答案:

答案 0 :(得分:3)

您无需在此处添加任何内容,只需将类'checkall'添加到输入中即可。因此,你应该有类似的东西:

<input type="button" class="blkbuttonsmall checkall" value="Toggle All/None">

原因是'.checkall'中的jQuery选择器$('.checkall')找到了具有类'checkall'的所有元素,然后将指定的函数附加到它。