“检查所有”功能使用瑞安既成事实的“自定义表单元素”时(“Check All” function w

2019-10-16 23:36发布

我已经使用瑞安既成事实的自定义表单元素做了一个简单的形式。 现在我想实现一个“全选” /“全部取消”功能。

我有什么作品大多,但用户必须点击两次按钮来获得所需的结果。 我有一种感觉,我需要从自定义表单元素脚本中调用这个函数,但我不知道怎么办。

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

任何帮助,将不胜感激 - 谢谢!

Answer 1:

如果你正在使用jQuery那么为什么不使用它来充分发挥其潜力? 这也意味着,没有内嵌代码...第一添加ID到您的按钮。 然后确保你使用正确的群体,这样反而groupgroup[] 然后用这个代码,它应该工作:

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

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


Answer 2:

看看下面的网址

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



文章来源: “Check All” function when using Ryan Fait's “Custom Form Elements”