checkbox 全选、取消全选等并且获取checkbox的值

最新推荐文章于 2023-12-12 20:09:46 发布

原创最新推荐文章于 2023-12-12 20:09:46 发布 · 592 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#function #input #jsp

jquery 专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在JSP页面中使用JavaScript和jQuery实现checkbox的全选、取消全选功能，并详细讲解了如何获取选中checkbox的值。通过设置checkbox的name属性，可以轻松地管理多个checkbox的选择状态。

$(function() { 
    //"checkAll"全选checkbox的name，"name"为checkbox的name，"text"为<input type="text" id="text" />的id
	$("#checkAll").click(function() { 
		if ($("[name='checkAll']").attr("checked") == 'checked' ) { // 全选 
               $("[name='name']").attr("checked", true); 
		} else { // 取消全选 
               $("[name='name']").attr("checked", false); 
		}
		
		var str="";
         $("[name='name'][checked]").each(function(){
              str+=$(this).val()+"、";
          })
    	$("#text").val(str);
	}); 
	
   $("[name='name']").each(function(){
    $(this).unbind();
    $(this).bind('click',function(){
        if ($("input[type=checkbox][name='name']").length != $("[name='name'][checked]").size()) {
           $("[name='checkAll']").removeAttr("checked");
        } else {
           $("[name='checkAll']").attr("checked",'checked');
        }
        var str="";
         $("[name='name'][checked]").each(function(){
              str+=$(this).val()+"、";
          })
    	$("#text").val(str);
    }); 
  }); 
});

在jsp中直接添加即可，注意checkbox的name

非常好用哦！