jQuery获取“事件调用”元素答案

【问题标题】：jQuery get the "event invoking" elementjQuery获取“事件调用”元素
【发布时间】：2012-04-20 08:18:06
【问题描述】：

我的问题是，当点击下面的复选框时 - 调用 check 函数来选中/取消选中所有复选框。但是它们必须相对于调用复选框（带有“onchange”事件的复选框）进行更改。

复选框 HTML 声明：

<input type="checkbox" onchange="$('input[type=checkbox][rel=users]').check();">

示例 JavaScript 代码：

$.fn.check = function() {
    $(this).each(function(){
        $(this).attr('checked', checked);
    });
}

而我的问题是：如何获取与“全选”复选框对应的 DOM 对象？

【问题讨论】：

我真的不明白你的问题，你能详细点吗？你说的相对调用是什么意思？
当根目录被选中时 - 所有其他的都应该被选中，当它不是所有其他的时候都应该被取消选中。
@ItehnologicalDisexisting - 你应该不惜一切代价避免使用像onchange 这样的事件属性。
这是为什么呢？它适用于所有浏览器..

标签： javascript jquery object methods invoke

【解决方案1】：

编辑：将 checkAll 的 this 对象传递给函数。

DEMO

<input type="checkbox" 
   onchange="$('input[type=checkbox][rel=users]').check(this);" />

注意this 被传递为.check(this)

在 JS 中：

$(document).ready(function() {
    $.fn.check = function(orgEl) {
        $(this).each(function() {
            $(this).attr('checked', orgEl.checked);
        });
    }
});

旧帖 -

将 checkAll 复选框绑定到处理程序并从内部调用 fxn。见下文，

HTML

<input type="checkbox" id="checkAll" >

   $(document).ready (function () {
       $('#checkAll').click (function () {
          //this inside is checkAll checkbox object.
          $('input[type=checkbox][rel=users]').check();
       });
   });

【讨论】：

是的，当然 - 这对这种情况非常有效，但我想将脚本用作库，因此它必须自动执行。有办法吗？
@ItehnologicalDisexisting 查看更新的答案，让我知道它是否适合您。

【解决方案2】：

由于您将此绑定到“checkall”复选框，因此您可以内联访问自身。所以你可以将它传递给你创建的 jQuery .check() 函数并在那里使用它。看这个：（请原谅我对您的选择所做的更改，您显然可以使用以前的内容...但我建议使用:checkbox 而不是input[type=checkbox]）

<html>
<head>
    <script type="text/javascript" src="jquery-min.js"></script>
    <script type="text/javascript">
        $.fn.check = function (obj) {
            $(this).each(function (){
                this.checked = obj.checked;
            });
        }
    </script>
</head>
<body>
    <input type="checkbox" id="checkall" onclick="$('.check-item').check(this);" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
    <input type="checkbox" class="check-item" /><br />
<body>

【讨论】：

另外，让大家知道您应该使用复选框的“onclick”而不是“onchange”。较旧的 IE 浏览器（我不记得是否全部）不能使用“onchange”。

【解决方案3】：

View on JSFIDDLE.

我非常喜欢使用 HTML5 数据属性来处理此类内容。使用以下 DOM 结构，您可以在触发复选框上使用 data-target 属性定义目标复选框。目标应该是一个有效的 jQuery 选择器字符串。

HTML：

<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">

<label for="checkUsers">Users:</label>

<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">


<br><br>


<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">

<label for="checkPlaces">Places:</label>

<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">

然后您设置插件以使用您定义的目标来触发基于触发复选框的选中属性的检查/取消检查。

插件：

(function( $ ){

  $.fn.check = function() {  

    // "this" is a jQuery object of the checkbox that was clicked.
    var target = this.data("target");
    $(target).attr("checked", this[0].checked);

    return this; //maintain chainability

  };

})( jQuery );

这种方法的真正好处在于，它允许您通过将事件附加到 class 而不是 id 来管理一个事件处理程序声明。

事件处理程序声明：

$(function(){

    $(".checkAll").click(function(){
        $(this).check();
    });

});

【讨论】：

太棒了。我对这个响应的质量 100% 投票，但就我而言，我需要确保我的应用程序可以在所有浏览器上运行，因此 HTML5 并不是一个真正的选择。
@Itehnological - 使用数据属性不会在其他浏览器中引起问题。因为 JavaScript 是唯一使用它们的东西，所以它们不会影响布局或以我所知道的任何方式中断。如您所见，jQuery 已经使用.data() 方法原生处理了这些数据属性的处理。 jQuery 并非总是如此。您过去必须使用一个称为元数据插件的插件来实现此类功能。简而言之，不要让 HTML5 吓跑你！甚至 HTML5 中引入的新标签也可以轻松地在大多数常见浏览器中工作。