取消多个复选框中的复选框选择状态

问题描述：

我有一个很大的窗体，有几个复选框，名称为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”。提前致谢。

答

下面将在大多数浏览器工作，除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; 
}

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

答

你应该使用jQuery逆复选框。

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

查看了解更多信息。

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

代码'$（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/

答

有一个较短的解决方案：

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

更短：

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

取消多个复选框中的复选框选择状态

相关推荐