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

最新推荐文章于 2023-09-13 13:34:40 发布

夏鑫

最新推荐文章于 2023-09-13 13:34:40 发布

阅读量530

点赞数

分类专栏： jquery 文章标签： function input jsp

本文链接：https://blog.youkuaiyun.com/hs6823/article/details/7029624

版权

jquery 专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

非常好用哦！