Question

我有一个包含多组复选框的表单，这些复选框最初加载所有选中的复选框。提交表单时，根据“已选中”复选框，在$ _POST中构建数组。整个表单是基于数据库数据通过PHP动态构建的。

我想要实现的目标：我需要一个按钮或“可点击的东西”，它将切换组中的所有复选框，因为所有“未选中”，然后再次单击该按钮时，它会再次切换所有“已选中”。或者这可以通过两个按钮实现。（以更清洁/更容易的方式）

实施例：（这里只是两组简单的复选框数组）（每个都需要独立切换）（我手动将下面的代码包装在下面的框中显示）（这个例子只是PHP代码构建的代表）（示例中显示了两个按钮，但这可能是一个“全部切换”按钮）

<form action="" method="post" enctype="multipart/form-data" name="filters">

Select: <input name="select_all_regions" onclick="toggle_all_regions()" 
          type="button" value="all" /> 
/ <input name="select_no_regions" onclick="toggle_no_regions()" 
          type="button" value="none" />
<input name="regions[]" type="checkbox" value="7" checked />East Coast
<input name="regions[]" type="checkbox" value="14" checked />West Coast
<input name="regions[]" type="checkbox" value="15" checked />Gulf Coast

Select: <input name="select_all_places" onclick="toggle_all_places()" 
          type="button" value="all" /> 
/ <input name="select_no_places" onclick="toggle_no_places()" 
          type="button" value="none" />
<input name="places[]" type="checkbox" value="25" checked />Dock
<input name="places[]" type="checkbox" value="29" checked />Ramp
<input name="places[]" type="checkbox" value="34" checked />Natural

<input class="filter-button" id="filter-submit-button" name="go" 
          type="submit" value="Go!" />

</form>

我做过： Javascript和jQuery但“[]”似乎把它们都扔了。我确信有一个简单的解决方案，但到目前为止我一直无法找到它。

谢谢你看看!!!

更新（目前为止）：

我似乎做错了什么（它不起作用），这是显而易见的吗？

到目前为止我试过的代码：

   <SCRIPT LANGUAGE="JavaScript"> 
    <!-- Begin 
    var $regions = $('input[name="regions[]"]');
    $('[name="select_all_regions"]').click(function(){
    $regions.prop('checked', !regions.first().is(':checked'));
    });
    // End --> 
    </script>

Select: <input name="select_all_regions" type="button" value="toggle all regions" /><br />

<input class="category-item-checkbox" name="regions[]" type="checkbox" value="7" checked /><span class="category-item-title">Uptown</span>
<input class="category-item-checkbox" name="regions[]" type="checkbox" value="14" checked /><span class="category-item-title">Warehouse District</span>
<input class="category-item-checkbox" name="regions[]" type="checkbox" value="15" checked /><span class="category-item-title">French Quarter</span>

解决:(通过仓库）见下文。

我确信其他解决方案也可以起作用，但此时我无法使它们正常运行。

谢谢大家看这个!!! StackOverflow社区ROCKS !!!

Answer 1

尝试以下方法：

var $places = $('input[name="places[]"]');
$('[name="select_all_places"]').click(function(){
  $places.prop('checked', !places.first().is(':checked'));
});

Answer 2

使用没有onclick事件的确切HTML，您可以使用：

$('form[name="filters"]').click(function (e) {
    var match = e.target.name.match(/select_(all|no)_(.*)/);
    if (match) {
        $('input[name="' + match[2] + '[]"]').attr('checked', 'all' === match[1] && 'checked');
    }
});

DEMO

或更简单：

var $regions = $('input[name="regions[]"]'),
    $places = $('input[name="places[]"]');

$('input[name="select_all_regions"]').click(function() {
    $regions.attr('checked', 'checked');
});

$('input[name="select_no_regions"]').click(function() {
    $regions.attr('checked', false);
});

$('input[name="select_all_places"]').click(function() {
    $places.attr('checked', 'checked');
});

$('input[name="select_no_places"]').click(function() {
    $places.attr('checked', false);
});

<强> DEMO

Answer 3

您可以删除内嵌的onclick功能，并为所有按钮设置一次点击事件

$('form[name=filters] input[type=button]').click(function() {
    var name = $(this).attr('name').split('_')[2];  // takes regions/places out of name 
    $('input[name="'+ name +'[]"]').prop('checked',$(this).val() == 'all');
});

http://jsfiddle.net/wirey00/KJUFU/

选择全部/选择无切换具有名称[]（数组）命名约定的复选框

3 个答案: