带复选框的表 – 选中所有复选框并将值传递给AJAX脚本
我在第一列中有一个带有复选框的表 – 当选中时，它执行一个AJAX脚本，用所选值更新PHP会话变量。 这一切都运行良好但我现在需要扩展它以在第一列的顶部有一个复选框，以允许用户选择表中的所有项目并将所选项目的值（例如逗号分隔）作为AJAX脚本的参数 – 假设我需要一个新的脚本。
这是我到目前为止所拥有的：
$(document).ready(function() { $("input.select-item").click(function() { var productID = $(this).val(); // Create a reference to $(this) here: $this = $(this); $.post('productSelections.php', { type: 'updateSelections', productID: productID, selectionType: 'single' }, function(data) { data = JSON.parse(data); if (data.error) { var ajaxError = (data.text); var errorAlert = 'There was an error updating the Product Selections'; $this.closest('td').addClass("has-error"); $("#updateSelectionsErrorMessage").html(errorAlert); $("#updateSelectionsError").show(); return; // stop executing this function any further } else { $this.closest('td').addClass("success") $this.closest('td').removeClass("danger"); } }).fail(function(xhr) { var httpStatus = (xhr.status); var ajaxError = 'There was an error updating the Product Selections'; $this.closest('td').addClass("danger"); $("#updateSelectionsErrorMessage").html(ajaxError); $("#updateSelectionsError").show(); }); }); }); Product ID Description AT36288 Apples AT36289 Bananas AT36290 Oranges AT36292 Grapes
我在第一行添加了一个复选框，可用于选择所有项目 – 基本上相当于逐个单击每个复选框。 不确定如何扩展或创建一个新脚本，当单击时检查每个复选框并将ID值传递给我可以包含在我的AJAX脚本中的变量？
$('.select-all').on('click', function(){ var values = []; // will contain all checkbox values that you can send via ajax $('table > tbody input[type="checkbox"]').each(function(i, el) { $(el).prop('checked', true); values.push(el.value); }); });
添加了以下代码，完成了这个诀窍：
$("input.select-all").click(function() { $("input.select-item").each(function() { $(this).trigger('click'); }); });
$(document).ready(function() { $("input.select-all").click(function() { $("input.select-item").each(function() { $(this).trigger('click'); }); }); $("input.select-item").click(function() { var productID = $(this).val(); // Create a reference to $(this) here: $this = $(this); $.post('productSelections.php', { type: 'updateSelections', productID: productID, selectionType: 'single' }, function(data) { data = JSON.parse(data); if (data.error) { var ajaxError = (data.text); var errorAlert = 'There was an error updating the Product Selections'; $this.closest('td').addClass("has-error"); $("#updateSelectionsErrorMessage").html(errorAlert); $("#updateSelectionsError").show(); return; // stop executing this function any further } else { $this.closest('td').addClass("success") $this.closest('td').removeClass("danger"); } }).fail(function(xhr) { var httpStatus = (xhr.status); var ajaxError = 'There was an error updating the Product Selections'; $this.closest('td').addClass("danger"); $("#updateSelectionsErrorMessage").html(ajaxError); $("#updateSelectionsError").show(); }); }); });
Product ID Description AT36288 Apples AT36289 Bananas AT36290 Oranges AT36292 Grapes
这个适用于多个table并选中所有复选框。
Featuers：
- 选中所有复选框， 选中 /取消选中
- 单击复选框时，仅传递其ID和检查状态
从callUpdate调用您的callUpdate
// This will work with multiple table items // on page $(document).ready(function(){ function callUpdate( ids, isChecked ){ alert( 'Check status is: ' + isChecked + '\nids:\n' + ids.join(', ') ); } var allSelectAllCheckboxes = $('thead th:first .select-all'); // On related checkbox clicked individually allSelectAllCheckboxes.closest('table').find('tbody .select-item').click(function(){ var $el = $(this); callUpdate( [ $el.val() ], $el.prop('checked') ); }); // Look for master checkbox within table thead allSelectAllCheckboxes.click(function(){ // Get clicked checkbox var $clickedCheckbox = $(this); isSelectAllChecked = $clickedCheckbox.prop('checked'), $targetCheckboxes = $clickedCheckbox.closest('table').find('[name=select-item]'), ids = []; // Enumerate through each target checkbx $targetCheckboxes.each( function(){ // Set checkbox check/uncheck // according to 'select all' status this.checked = isSelectAllChecked; // Push product id to collection ids.push( this.value ); }); // Call update using our proxy function callUpdate( ids, isSelectAllChecked ); }); });
Product ID Description AT36288 Apples AT36289 Bananas AT36290 Oranges AT36292 Grapes