Question

我有一个容器，我有复选框。我在容器外面有一个select all复选框。

<tr>
<td width="33%">Category <br> <input type="checkbox" id="all_cat" name="catChkBox" class="ckbox"/> Select All/ Unselect All  </td>
</tr>
    <tr>
    <td width="50%" valign="top" id="catTd">
                                        <div class="container" id="categoryContainer"></div>
                                    </td>
    </tr>

使用DWR调用，我可以在容器内获取要填写的复选框值。

... function(data.... // data has got the values to be displayed in container with checkboxes
for(var i=0; i<data.length; i++)
{
$('#catContainer').append('<input type="checkbox" data-name="' + data[i].id + '" name="catChkBox" class="ckbox" id = "' + data[i].id + '" value="' + data[i].id + '" /> ' + data[i].name + '<br/>');
list = data[i].name;
catSL.push(data[i].id);
}
categories = $("input[name=catChkBox]:checked").map(function () {
return $(this).data('name');
}).get();
}, errorHandler:function(){
},async:false
});

我想现在选择所有选项。当我单击容器外的select all复选框时，它应该选择容器内的复选框。同样取消选择所有。我尝试了下面的代码，但它起作用了。

$('#all_cat').click( function(){
    for(var i=0; i<categoryData.length; i++)  //categoryData is the data which i get from dwr call
    {
    $(categoryData[i].id ).prop('checked', isChecked('all_cat'));
    }
    });
function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

任何帮助?????

Answer 1

您可以使用适当的jQuery选择器来选择容器中的所有复选框，并立即设置checked属性：

$('#all_cat').click(function() {
    $('#catContainer input.ckbox').prop('checked', $(this).is(':checked'));
});

Answer 2

这会将容器div中的所有复选框设置为与#all_cat复选框相同的选中状态：

$('#all_cat').click(function(){ 
    $('#categoryContainer input:checkbox').prop('checked', $(this).is(':checked'));
});

选中所有复选框 - 收集值

2 个答案: