checkbox选中的问题

最新推荐文章于 2024-11-20 02:25:29 发布

原创最新推荐文章于 2024-11-20 02:25:29 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #checkbox

WEB前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了使用原生JavaScript、jQuery及JSP实现批量选择、取消选择和反向选择复选框的方法。通过具体示例代码展示了不同技术手段下如何高效地管理一组复选框的状态。

一:原生方法

<span style="font-size:14px;">  if (document.getElementById("CheckAll").checked === false)
                {
                    var array = document.getElementsByName("checkBoxGroup");                   
                    for (var i = 0; i < array.length; i++) {
                        array[i].checked = false;
                    }
                }</span>

二:Jquery方法

http://www.cnblogs.com/libingql/archive/2011/11/07/2238663.html

<a href="javascript:;" id="all">全部选择</a><br>
<a href="javascript:;" id="delAll">取消选择</a><br>
<a href="javascript:;" id="antiAll">反向选择</a>
<p><input type="checkbox" name="checkbox1">A
<input type="checkbox" name="checkbox1"> B

Jquery部分

//全部选择
$("#all").click(function(){
  $("input[name='checkbox1']").each(function(){
   $(this).attr("checked",true);
  });
});

Jquery部分：

//取消选择
$("#delAll").click(function(){
  $("input[name='checkbox1']").each(function(){
   $(this).attr("checked",false);
  });
});

Jquery部分：

//反向选择
$("#antiAll").click(function(){
  $("input[name='checkbox1']").each(function(){
   $(this).attr("checked",!this.checked);
     });

三:JSP方法

不排除有些时候javascript不好用,或者有些莫名其妙的问题,这个时候用jsp方法最保险

<input class="none" type="checkbox" name="isShare" id="isShare" value="true" <%=((Integer)request.getAttribute("isShare")==1?"checked='checked'":"")%>></input>