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

"Check All" function when using Ryan Fait's "Custom Form Elements"

本文关键字：时的 全选 功能 元素 自定义 Ryan Fait 使用 表单      更新时间：2023-09-26

我使用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>

我的网页： 

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

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

如果你正在使用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) })

查看以下网址

取消选中自定义表单元素中的复选框

相关文章：