Question

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

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

Answer 1

您可以将状态保留在jQuery的data()中，因为图像无法检查/取消选中

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

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

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

对each()的复选框进行迭代不是必需的，可以使用jQuery＆＃39; prop()。

FIDDLE

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

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

Answer 4

将标签放入标签中。并为click事件编写代码。

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

使用jquery单击图像，选中并取消选中所有复选框

4 个答案: