通过使用 jquery 单击图像来选中和取消选中所有复选框答案

【问题标题】：Check and uncheck all checkboxes by clicking an image using jquery通过使用 jquery 单击图像来选中和取消选中所有复选框
【发布时间】：2014-06-26 01:25:16
【问题描述】：

当用户使用 jquery 单击“检查”图像时，我正在尝试选中或取消选中所有复选框。如果我有一个输入 type="checkbox" 我可以让它工作，但如果我使用一个图像它就不起作用。

HTML：

<th align="center"><img src="images/checkbox.gif" id="checkAll" name="checkAll"/></th>

jQuery:

     $('#checkAll').click(function(event) { //on click
        if(this.checked) { // check select status
            $('.chkaction').each(function() { //loop through each checkbox
                this.checked = true;                
            });
        }else{
            $('.chkaction').each(function() { //loop through each checkbox
                this.checked = false; 
            });        
        }
    });

【问题讨论】：

你的意思是当复选框是图像时？或者当你点击图片时？
好吧，没有选中状态的图像this.checked 将不起作用
列头有支票图片。我想单击该图像，并且需要检查标题下方列中的所有复选框。如果我再次单击它，那么他们需要取消选中。

标签： jquery checkbox

【解决方案1】：

你可以只保留 jQuery 的 data() 中的状态，因为图像不能被选中/取消选中

$('#checkAll').on('click', function () {
    var checked = !$(this).data('checked');

    $('.chkaction').prop('checked', checked);

    $(this).data('checked', checked);
});

不需要使用each() 遍历复选框，可以使用jQuery 的prop() 代替。

FIDDLE

【讨论】：

唯一的问题是如果 OP 手动更改每个复选框的状态。在您的小提琴中，如果您最初检查它们，那么您第一次单击它时不会发生任何事情。我认为以下行为更好jsfiddle.net/Ujx52/1
这行得通。我可以通过单击图像来选中和取消选中所有。
@mac3201 但是，如果您按照我在评论中显示的步骤进行操作，您会发现在这种情况下它不起作用
@JuanMendes - 这就是它通常的工作方式，没有人真的会费心检查是否所有的框都被这样选中，但这是个好主意。

【解决方案2】：

通常，在这种情况下会发生以下情况。

如果选中所有框，则取消选中它们。
如果没有选中任何框，请选中它们。

因为如果你只是切换所有，在你手动更改每个复选框后，行为很难遵循。

http://jsfiddle.net/Ujx52/1/

$('#checkAll').on('click', function () {
    var allChecked = true;
    $('.chkaction').each(function(){
        if (!this.checked) {
            allChecked = false;
        }
    });
    $('.chkaction').prop('checked', !allChecked);
});

【讨论】：

【解决方案3】：

试试这个，我在图像上添加/删除一个类以获取复选框的状态。

$('#checkAll').click(function(event) { //on click
    var self = $(this);
    if( !self.hasClass('check') ) { // check select status
        self.addClass('check');
        $('.chkaction').each(function() { //loop through each checkbox
            this.checked = true;                
        });
    } else {
        self.removeClass('check');
        $('.chkaction').each(function() { //loop through each checkbox
            this.checked = false; 
        });        
    }
});

【讨论】：

【解决方案4】：

在标签中放置标签。并为点击事件编写代码。

<a href='#'><img src="images/checkbox.gif" id="checkAll" name="checkAll"/><a>

【讨论】：