1

我的问题是，当单击下面的复选框时 - 调用 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 对象？

4

3 回答 3

1

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

这种方法的真正好处是它允许您只需要通过将事件附加到 aclass而不是. 来管理一个事件处理程序声明id。

事件处理程序声明：

$(function(){

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

});
于 2012-04-06T20:16:48.337 回答
1

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

演示

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

JS

   $(document).ready (function () {
       $('#checkAll').click (function () {
          //this inside is checkAll checkbox object.
          $('input[type=checkbox][rel=users]').check();
       });
   });
于 2012-04-06T19:17:40.073 回答
1

由于您将此绑定到“checkall”复选框，因此您可以内联访问自身。所以你可以将它传递给.check()你创建的 jQuery 函数并在那里使用它。看看这个：（请原谅我对您的选择所做的更改，您显然可以使用以前的内容......但我建议使用: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>

于 2012-04-06T19:26:54.197 回答