使用 Ryan Fait 的“自定义表单元素”时的“全选”功能答案

【问题标题】："Check All" function when using Ryan Fait's "Custom Form Elements"使用 Ryan Fait 的“自定义表单元素”时的“全选”功能
【发布时间】：2012-07-05 20:43:58
【问题描述】：

我使用 Ryan Fait 的自定义表单元素制作了一个简单的表单。现在我正在尝试实现“全选”/“取消全选”功能。

除了用户必须单击按钮两次才能获得所需的结果之外，我的大部分工作都是有效的。我有一种感觉，我需要从自定义表单元素脚本中调用此函数，但我不知道如何。

我正在使用 JQuery、自定义表单元素 (http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/custom-form-elements.js)，这是：

<script type = "text/javascript">
function cboxToggle(group, action) {
for( var i=0, len = group.length; i < len; i++) {
group[i].checked = action;
}
}

</script>

我的 HTML：

<form name="myname" action="checkboxes.asp" method="post">
<input type = "button" value = " CHECK ALL" onclick = "cboxToggle(check_list, !this.checked)"><br>
<input type = "button" value = " UNCHECK ALL" onclick = "cboxToggle(check_list, this.checked)"><br>

<p><input type="checkbox" name="check_list" value="1" class="styled" />Option 1 </p> 
<p><input type="checkbox" name="check_list" value="2" class="styled" />Option 2 </p>
<p><input type="checkbox" name="check_list" value="3" class="styled" />Option 3 </p>
</form>

任何帮助将不胜感激 - 谢谢！

【问题讨论】：

标签： javascript jquery forms checkbox

【解决方案1】：

如果您正在使用 jQuery，那么为什么不充分利用它呢？这也意味着，没有内联代码......首先为您的按钮添加一个 id。然后确保您正确使用组，因此您可以使用group[] 而不是group。然后使用此代码，它应该可以工作：

var ckToggle = function (group, action) {
  $('[name="'+ group +'"]').prop('checked', action)
}

$('#buttonAll').click(function(){ ckToggle('check_list[]', true) })
$('#buttonNone').click(function(){ ckToggle('check_list[]', false) })

【讨论】：

感谢您的快速回复，elclanrs！我肯定错过了什么。我给了每个按钮的 id 并用你的替换了我的 JS。我还有什么需要做的吗？
在这里工作jsfiddle.net/elclanrs/MXVne。我错过了一个报价，所以也许这就是它不起作用的原因，再次检查代码。
它在你的 jsfiddle 中看起来很棒，但由于某种原因它在我的服务器上不起作用。感觉很愚蠢，我敢肯定这是显而易见的。在这里查看我的测试页面：devel.isetgroup.com/js-playground/test.html
是的 - 这就是缺少的。谢谢。使用默认表单元素效果很好，但自定义表单元素仍然存在同样的问题。我必须点击按钮两次才能让它们工作。
我增强了我的测试示例以包含自定义表单 Elements.js：devel.isetgroup.com/js-playground/test.html

【解决方案2】：

查看以下网址

Uncheck checkbox in custom form elements

【讨论】：