全選/無選擇切換名稱爲[]（數組）的複選框命名約定

我有一個窗體有多組初始化所有選中的複選框。當提交表單時，基於「檢查」複選框的內容將在$ _POST中創建數組。整個表單是基於數據庫數據通過PHP動態構建的。全選/無選擇切換名稱爲[]（數組）的複選框命名約定

我想得到什麼結果：我需要一個按鈕或'可點擊的東西'，它將切換組內的所有複選框，因爲所有「未選中」，然後當再次單擊按鈕時，它將切換所有「再次檢查」。或者這可以通過兩個按鈕來實現。（取清潔劑/更容易）

實施例：（這裏提供了兩個簡單的複選框陣列的基團）（每個需要在其它的獨立地切換）（I手動包裹下面的代碼中，以顯示它的所有下面的方框）（這個例子的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，但「[]」似乎把它們都扔了。我確信有一個簡單的解決方案，但到目前爲止我一直無法找到它。

謝謝你看看！

UPDATE（到目前爲止）：

我好像做錯了什麼（它不工作），是明擺着的嗎？

到目前爲止的代碼我試過：

<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 !!!

來源

2012-12-28 Rob

我只是想：'警報（$（'輸入[名=「regions []」]'）.length）;'在jsFiddle中，它工作正常。你有什麼具體問題？ –

對於我自己和其他人來說，運行警報（$（'input [name =「regions []」]'）.length）;在jsFiddle「證明」中是什麼？我試圖理解你的評論，因爲它看起來非常有用。謝謝！ – Rob

與您確切的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'); 
    } 
});

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

來源

2012-12-28 19:44:03

它工作！真棒！謝謝！ – Rob

嘗試以下操作：

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

來源

2012-12-28 19:38:59 elclanrs

我在上面添加了更多的代碼...我似乎無法得到這個工作。我猜在這一點上我正在做一些基本的錯誤。 – Rob

可以刪除內嵌的onclick功能，並有一個click事件的所有按鈕

$('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-28 19:47:32

全選/無選擇切換名稱爲[]（數組）的複選框命名約定

回答

相關問題