获取相同class相同的元素值，获取单选框中选中对象的值

最新推荐文章于 2025-06-10 11:30:12 发布

最新推荐文章于 2025-06-10 11:30:12 发布 · 755 阅读

文章标签：

#html #jsp #jquery #ViewUI

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用JSP技术实现的简单网页案例，该案例通过jQuery库实现了前端与后端的数据交互功能，包括读取单选按钮的值及根据按钮值改变元素背景颜色等操作。

<%@ 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>My JSP 'radil_checked.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

	<style type="text/css">
	.menu{
		border: 1px solid #ffEEcc;
		border-collapse: collapse;
		line-height: 30px;
	}
	</style>
  <script type="text/javascript" src="Script/jquery.js"></script>
  <script type="text/javascript">
  	function clk () {
  		var val = $("input[type='radio'][name='num']:checked").val();
  		alert(val);
  	}
  	
  	function changeBackColor (str) {
  		$("#main").children(".list").children(".menu").each(function(i,v){
  			if(v.innerHTML == str){
  				$(this).css('background-color','yellow');
  			} else {
  				$(this).css('background-color','white');
  			}
  		});
  	}
  </script>
  </head>
  
  <body>
  <fieldset>
  	<legend>获取单选框值</legend>
    <input type="radio" name="num" value="1" onclick="clk();">1
    <input type="radio" name="num" value="2" onclick="clk();">2
    <input type="radio" name="num" value="3" onclick="clk();">3
    <input type="radio" name="num" value="4" onclick="clk();">4
    <input type="radio" name="num" value="5" onclick="clk();">5
  </fieldset><br><br>
  <div id="main">
  	<div class="list">
  		<div class="menu">menu</div>
  	</div>
  	<div class="list">
  		<div class="menu">menu1</div>
  	</div>
  	<div class="list">
  		<div class="menu">menu2</div>
  	</div>
  </div>
  <input type="button" value="menu" onclick="changeBackColor(this.value)">&nbsp;
  <input type="button" value="menu1" onclick="changeBackColor(this.value)">&nbsp;
  <input type="button" value="menu2" onclick="changeBackColor(this.value)">&nbsp;
  </body>
</html>