效果圖：
html代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<script src="test.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body{
background-image: url(img/bg.jpg);
font-family: "微軟雅黑";
}
ul li{list-style:none;float:left;cursor:pointer;padding:0 5px;border:1px solid #ccc;border-radius:2px;margin: 0 2px;}
.content,content-radio,content-checkbox{display:inline;}
.selected{background-color: #17D6AA;}
</style>
</head>
<body>
<span>jquery 獲取 ul li 的值: <span class="content">全部</span></span>
<ul>
<li>值一</li>
<li>值二</li>
<li>值三</li>
<li>值四</li>
<li>值五</li>
</ul>
<br><br>
<span>jquery 獲取 radio 的值: <span class="content-radio">全部</span></span><br>
<label><input type="radio" name="sex" value="男">男</label>
<label><input type="radio" name="sex" value="女">女</label>
<label><input type="radio" name="sex" value="保密">保密</label>
<!--
<p>1、$('input:radio:checked').val();</p>
<p>2、$("input[type='radio']:checked").val();</p>
<p>3、$("input[name='sex']:checked").val();</p>
<p>4、val 可以換成 text;</p>
-->
<br><br>
<span>jquery 獲取 checkbox 的值: <span class="content-checkbox">全部</span></span><br>
<label><input type="checkbox" name="con" value="內容一">內容一</label>
<label><input type="checkbox" name="con" value="內容二">內容二</label>
<label><input type="checkbox" name="con" value="內容三">內容三</label>
<br><br>
<span>jquery 獲取 select 的值: <span class="content-select">全部</span></span><br>
<select>
<option>-請選擇-</option>
<option>選擇一</option>
<option>選擇二</option>
<option>選擇三</option>
</select>
</body>
</html>
jquery代碼：
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script>
$(function(){
// 獲取 ul li 中的值
$("ul").find("li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
$(".content").text($(this).text());
});
// 獲取 radio 中的值
//作者主頁 https://www.2017549.com
$("input[type='radio']").click(function(){
$(".content-radio").text($("input[type='radio']:checked").val());
});
// 獲取 checkbox 中的值
$("input[type='checkbox']").click(function(){
var cons = [];// 每次點擊需清空上次選擇內容，避免重復
$("input[type=checkbox]").each(function(){
if(this.checked){
cons.push($(this).val());
$(".content-checkbox").text(cons);
}
});
});
// 獲取 select 中的值
$("select").click(function(){
$(".content-select").text($('select option:selected').text());
});
});
</script>
聯(lián)系客服
