0

我有一个表单，其中包含多组复选框，这些复选框最初加载所有复选框。提交表单时，数组会根据“选中”的复选框在 $_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 社区摇滚！！！

4

3 回答 3

1

尝试以下操作：

var $places = $('input[name="places[]"]');
$('[name="select_all_places"]').click(function(){
  $places.prop('checked', !places.first().is(':checked'));
});
于 2012-12-28T19:38:59.613 回答
1

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

$('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');
    }
});

演示

或更简单地说：

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

​<strong> DEMO

于 2012-12-28T19:44:03.707 回答
0

您可以删除内联 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/

于 2012-12-28T19:47:32.313 回答