JQuery对单选框，复选框，下拉菜单的操作

最新推荐文章于 2022-06-20 15:22:48 发布

yaoshengting

最新推荐文章于 2022-06-20 15:22:48 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： # JQuery 文章标签： jquery input function class stylesheet button

本文链接：https://blog.youkuaiyun.com/ystyaoshengting/article/details/6679731

JQuery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用JQuery进行表单操作的方法，包括文本框、单选按钮、复选框及下拉菜单的读取与控制。通过具体实例展示了如何通过JQuery选取和修改这些表单元素的状态。

近段时间在学习JQuery，作为笔记，写点东西，废话不多说了，下面是jsp，js，css代码，注释里写的已经很清楚了，不需要额外的再说了

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%>">
  <link rel="stylesheet" type="text/css" media="screen"
   href="css/practices.css" />
     <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/practices.js" type="text/javascript"></script>
</head>

<body>

  <div class="divFrame2">
   <div class="divTitle2"> 请输入如下信息</div>
   <div class="divContent2">
    姓名：<input id="Text1" type="text" class="txtCss"/><br />
    性别：<input id="Radio1" name="rdoSex" type="radio" value=" 男" /> 男
      <input id="Radio2" name="rdoSex" type="radio" value=" 女" /> 女<br />
    婚否：<input id="Checkbox1" name="marry" type="checkbox" />
    <br/><br/><br/>爱好：<br/>
    乒乓球：<input id="Checkbox2" name="hobby" type="checkbox" value="乒乓球" /><br/>
    台    球：<input id="Checkbox3"   name="hobby" type="checkbox" value="台球" /><br/>
    篮    球：<input id="Checkbox4"   name="hobby" type="checkbox" value="篮球" /><br/>
    足    球：<input id="Checkbox5"   name="hobby" type="checkbox" value="足球" /><br/>
    游    泳：<input id="Checkbox6"   name="hobby" type="checkbox" value="游泳" /><br/>
    <a id="selectAll">全选</a>    <a id="disAll">取消</a><br>
    <br/><br/><br/>来自何方：<br/>
    <select name="where">
     <option value="hk">Hong Kong</option>
     <option value="tw" selected>Taiwan</option>
     <option value="cn">China</option>
     <option value="us">United States</option>
     <option value="ca">Canada</option>
    </select>

     <div class="divBtn">
      <input id="Button1" type="button" value=" 提交" class="btnCss" />
      </div>
   </div>
  </div>
  <div id="divTip" class="divTip"></div>
</body>
</html>

$(document).ready(function() {
// do something here

$(".divTitle").click(function(){

  //next(selected)函数:找到后面紧邻的同辈元素中类名为selected的元素。
  $(this).addClass("divCurrColor1")
      .next(".divContent1").css("display","block");

  });

  $("#selectAll").click(function (){

        $("input[@name='hobby']").attr("checked",true);
    });
    $("#disAll").click(function (){

        $("input[@name='hobby']").attr("checked",false);
    });

  $("#Button1").click(function(){

      // 获取文本框的值
      var oTxtValue=$("#Text1").val();


      // 获取单选框按钮值
      //用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
      var oRdoValue=$("#Radio1").is(":checked") ? " 男":" 女";

     //下面的这个alert是尝试用其他办法获得单选框的值
     //得到单选框的选中项的值(注意中间没有空格)
       alert($("input[@type=radio][@checked]").val());


      // 获取复选框按钮值
      var oChkValue=$("#Checkbox1").attr("checked") ? " 已婚":" 未婚";
      var hobby="";
      $("input[@name=hobby][@checked]").each(function(){
   hobby=hobby+$(this).val()+" ";
  });

      //下面的这几个alert是尝试用不同的办法获得checkbox是否被选中
      alert($("#Checkbox1").is(":checked") ? " 已婚":" 未婚");
      alert($("#Checkbox1").attr("checked")+" 2");
      alert($("input[@id='Checkbox1']").attr("checked")+"   3");
      alert($("input[@name='Checkbox1']").is(":checked")+"   4");

      var hefang="";
      //得到下拉菜单的选中项的值
     // hefang=$("select[@name=where] option[@selected]").val();

     //得到下拉菜单的选中项的文本(注意中间有空格)
     //表示具有name 属性，并且该属性值为’country’ 的select元素里面的具有selected 属性的option 元素。
     //可以看出有@开头的就表示后面跟的是属性。
      hefang=$("select[@name=where] option[@selected]").text();

     // 显示提示文本元素
      $("#divTip").css("display","block");
      // 设置文本元素的内容

      $("#divTip").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue+"<br>"+hobby+"<br>"+hefang);
  });

});

CSS

.divFrame2{
width:260px;
border:solid 1px #666;
font-size:10pt
}
.divTitle2{
background-color:#eee;
padding:5px
}
.divContent2{
padding:8px;
font-size:9pt
}
.divTip{
width:244px;
border:solid 1px #666;
padding:8px;font-size:9pt;
margin-top:5px;display:none
}
.txtCss{
border:solid 1px #ccc
}
.divBtn{
padding-top:5px
}
.divBtn .btnCss{
border:solid 1px #535353;
width:60px
}