取消多個複選框中的複選框選擇狀態

我有一個很大的窗體，有幾個複選框，名稱爲chkbx0..chkbxN（N由PHP代碼生成窗體）。我想創建一個類似鏈接的實體，當點擊它時，所有複選框都會反轉選中的狀態（所以，選中的內容將變爲未選中狀態，反之亦然）。所以基本上我很感興趣，其中有一個參數（「N」）和所從事的工作的JavaScript函數，我只能說這是這樣的：取消多個複選框中的複選框選擇狀態

<p>You can reverse checkboxes <a href="javascript:chkbxsnegate(<?php echo $n; ?>);">by clicking here</a>.</p>

複選框被的類似：

<input type="checkbox" name="chkbx0"> 
    <input type="checkbox" name="chkbx1"> 
    ...

我使用參數「N」，因爲可以有更多的複選框，但我只需要將檢查狀態反轉爲「N」。

請給我一個JavaScript代碼片段來實現函數「chkbxsnegate」。提前致謝。

來源

2012-03-14 LGB

下面將在大多數瀏覽器工作，除IE7及以下（但在IE8的作品和9）

function chkbxsnegate(n) { 
    var qsa = document.querySelectorAll("input[type=checkbox][name=chkbx"+n+"]"), 
     l = qsa.length, i; 
    for(i=0; i<l; i++) qsa[i].checked = !qsa[i].checked; 
}

來源

2012-03-14 15:51:26

我可以改變它在IE7工作，下面，使用'getElementsByName（）'，如果你需要我。讓我知道如果你這樣做。 – 2012-03-14 15:52:01

-1

你應該使用jQuery逆複選框。

$('a#cb-inverse').click(function() { 
$('input.my_cb').each(function() { 
    $(this).is(':checked') ? $(this).removeAttr('checked') : $(this).attr('checked','checked'); 
}); 
});

查看瞭解更多信息。

來源

2012-03-14 15:51:42 Devator

attr和removeAttr不支持道具。 http://api.jquery.com/attr/ – Liam 2012-03-14 15:56:04

謝謝，但我是一個平均JS的初學者，JQuery對我來說完全是外星人:)而且我認爲我想要的東西可以用幾行「常規「的JS，它幾乎可以在任何瀏覽器上工作，甚至不需要使用jQuery等等。因爲我只需要這個功能，所以我覺得依賴高級框架有點矯枉過正。但我可能在這裏錯了，正如我所說的，我不是這方面的專家:) – LGB 2012-03-14 15:57:53

JQuery將在每個瀏覽器上工作，你會發現你需要爲每個瀏覽器編寫更多的代碼沒有JQuery，那就是它的重點。 – Liam 2012-03-14 16:02:34

您可以使用jQuery

$('input[name^=chkbx]').each(function() { 
    if ($(this).is(':checked')) 
    { 
    $(this).prop('checked', false); 
    } 
    else 
    { 
    $(this).prop('checked', true); 
    } 
});

來源

2012-03-14 15:54:54 Liam

代碼'$（this）.is（'：checked' ）'可以用$（this）.prop（'checked'）'替換。我認爲這很好。 [http://api.jquery.com/prop/](http://api.jquery.com/prop/） – 2015-03-25 10:13:06

做，如果我很好理解，你需要扭轉checked屬性，直到n^th元素（從0到n^th含稅）

var chkbxsnegate = function(n) { 
    var cbox = document.querySelectorAll('input[type="checkbox"][name^="chkbx"]'); 
    while (n--) { 
     cbox[n].checked = !cbox[n].checked; 
    } 
}

例小提琴：http://jsfiddle.net/wHPnA/

來源

2012-03-14 16:00:52 fcalderan

有一個較短的解決方案：

$('input[type="checkbox"]').each(function() { 
    $(this).prop('checked', !$(this).is(':checked')); 
});

更短：

$("[type=checkbox]").each(function() { 
    this.checked = !this.checked; 
});

來源

2014-11-03 08:15:32

取消多個複選框中的複選框選擇狀態

回答

相關問題