jQuery中的val()示例應(yīng)用
更新時間:2014年02月26日 16:54:14 作者:
這篇文章主要介紹了jQuery中的val()的使用,需要的朋友可以參考下
1、實(shí)例源碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的val()</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("input[name=ckb]:checked").each(function() {
alert($(this).val());
});
});
});
</script>
</head>
<body>
<div id="div1">
<table>
<tr>
<td>
<input type="checkbox" id="ckb1" name="ckb" value="籃球"/>籃球
<input type="checkbox" id="ckb2" name="ckb" value="足球"/>足球
<input type="checkbox" id="ckb3" name="ckb" value="排球"/>排球
</td>
</tr>
<tr>
<td>
<input type="button" id="btn" value="取值"/>
</td>
</tr>
</table>
</div>
</body>
</html>
2、結(jié)果如下
(1)選中所有的
依次彈出“籃球、足球和排球”
(2)選中部分
依次彈出相應(yīng)的值
(3)全不選
不彈窗口
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的val()</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("input[name=ckb]:checked").each(function() {
alert($(this).val());
});
});
});
</script>
</head>
<body>
<div id="div1">
<table>
<tr>
<td>
<input type="checkbox" id="ckb1" name="ckb" value="籃球"/>籃球
<input type="checkbox" id="ckb2" name="ckb" value="足球"/>足球
<input type="checkbox" id="ckb3" name="ckb" value="排球"/>排球
</td>
</tr>
<tr>
<td>
<input type="button" id="btn" value="取值"/>
</td>
</tr>
</table>
</div>
</body>
</html>
2、結(jié)果如下
(1)選中所有的
依次彈出“籃球、足球和排球”
(2)選中部分
依次彈出相應(yīng)的值
(3)全不選
不彈窗口
您可能感興趣的文章:
相關(guān)文章
Jquery UI震動效果實(shí)現(xiàn)原理及步驟
如果你想你的博客頁面某些部分引起讀者的注意,你可以使這些部分震動,如廣告等等,今天這篇文章將介紹怎樣使你的頁面中的元素震動起來,感興趣的你可不要錯過了哦,或許對你學(xué)習(xí)jquery ui 有所幫助2013-02-02教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
iframe因?yàn)槟芎途W(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分?jǐn)?shù)據(jù)成為可能,可是 iframe的大小卻不像層那樣可以“伸縮自如”,所以帶來了使用上的麻煩,給iframe設(shè)置高度的時候多了也不好,少了更是不行,今天我們就來分享2種使用jquery實(shí)現(xiàn)iframe自適應(yīng)高度的代碼2014-06-06servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼
現(xiàn)在文件的上傳,特別是大文件上傳,都需要進(jìn)度條。這篇文章主要介紹了servlet+jquery實(shí)現(xiàn)文件上傳進(jìn)度條示例代碼,有興趣的可以了解一下。2017-01-01jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法
這篇文章主要介紹了jQuery+Ajax實(shí)現(xiàn)限制查詢間隔的方法,涉及jQuery的ajax方法參數(shù)設(shè)置及asp.net后臺交互的相關(guān)技巧,需要的朋友可以參考下2016-06-06jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)鼠標(biāo)單擊修改內(nèi)容的方法,需要的朋友可以參考下2014-06-06Jquery AutoComplete自動完成 的使用方法實(shí)例
jQuery的Autocomplete(自動完成、自動填充)插件有不少,但比較下來我感覺,還是bassistance.de的JQuery Autocomplete plugin比較強(qiáng)大,我們就來寫一些代碼感受一下。2010-03-03jquery實(shí)現(xiàn)類似淘寶星星評分功能有截圖
本節(jié)主要介紹了jquery實(shí)現(xiàn)類似淘寶星星評分功能,經(jīng)測試效果相當(dāng)不錯,有圖有真相,喜歡的朋友可以參考下2014-09-09jQuery實(shí)現(xiàn)帶進(jìn)度條的輪播圖
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)帶進(jìn)度條的輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09