单选框的全选、全不选、部分选和获取选中值

最新推荐文章于 2022-12-13 22:34:38 发布

原创最新推荐文章于 2022-12-13 22:34:38 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #java #ViewUI

jquery 专栏收录该内容

6 篇文章

订阅专栏

本实例展示了web程序中一组单选框的选择情况。

项目代码结构如图所示：

[img]http://dl2.iteye.com/upload/attachment/0092/0240/88849da9-f7db-3d16-8573-ec6156c0cc18.jpg[/img]

index.jsp代码如下所示：


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>test jquery</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
    <script type="text/javascript" src="javascript/jquery-1.4.js"> </script> 
    <script type="text/javascript">
     $("document").ready(function(){
       $("#btn1").click(function(){
         $("[name='checkbox']").attr("checked","true");
       });
       $("#btn2").click(function(){
         $("[name='checkbox']").removeAttr("checked");
       });
       $("#btn3").click(function(){
         $("[name='checkbox']:even").attr("checked","true");
       });
       $("#btn4").click(function(){
         $("[name='checkbox']").each(function(){
           if($(this).attr("checked")){
             $(this).removeAttr("checked");
           }else{
             $(this).attr("checked","true");
           }
         });
       });
       $("#btn5").click(function(){
       var str = "";
         $("[name='checkbox']:checked").each(function(){
           str+=$(this).val()+"\r\n";
         });
         window.alert(str);
       });
     });
    </script> 
  </head>

  <body>
     <input type="button" id="btn1" value="全选">
     <input type="button" id="btn2" value="取消全选">
     <input type="button" id="btn3" value="选中所有奇数">
     <input type="button" id="btn4" value="反选">
     <input type="button" id="btn5" value="获取选中的所有值">
     <br/><br/>
      <input type="checkbox" name="checkbox" value="checkbox1">checkbox1
      <input type="checkbox" name="checkbox" value="checkbox2">checkbox2
      <input type="checkbox" name="checkbox" value="checkbox3">checkbox3
      <input type="checkbox" name="checkbox" value="checkbox4">checkbox4
      <input type="checkbox" name="checkbox" value="checkbox5">checkbox5
      <input type="checkbox" name="checkbox" value="checkbox6">checkbox6
  </body>
</html>