Question

我的问题是，当点击下面的复选框时 - 调用检查功能来检查/取消选中所有复选框。但是他们必须相对于调用复选框（带有＆＃34; onchange＆＃34;事件）的复选框进行更改。

复选框HTML声明：

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

示例JavaScript代码：

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

我的问题是：如何获得对应于＆＃34;检查所有＆＃34;的DOM对象？复选框？

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

<强> JS

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

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

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

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

<强>插件：

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

});

jQuery获取“事件调用”元素

3 个答案:

旧帖子 -