jquery 操作checkbox 和select

最新推荐文章于 2024-07-16 14:17:54 发布

yhjhoo

最新推荐文章于 2024-07-16 14:17:54 发布

阅读量81

点赞数

分类专栏： Web前端开发文章标签： jQuery JavaScript XHTML HTML .net ViewUI

Web前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

以前早就想写篇这样的文章，每次遇到这个问题总是想一阵子，然后按照解题的思路走一遍，走了很多重复的路。所幸今天有空，就写了下来。

代码大概如下，懒得兄弟可以直接到附件里面下载直接看效果

写道

<!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>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {

});

function getAllCheckBox(){
$("input[name=testCheckBox]").each(function(){
alert($(this).val() );
});
}
function getSelectCheckBox(){
$("input[name=testCheckBox]").each(function(){
if(this.checked == true){
alert($(this).val() );
}
});
}

function getAllSelect(){
$("#testSelect option").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getSelectSelect(){
$("#testSelect option[selected=selected]").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}

function getAllMSelect(){
$("#testMSelect option").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
function getSelectMSelect(){
$("#testMSelect option[selected=selected]").each(function(){
alert("value:" + $(this).val() + ",text:" + $(this).text() );
});
}
</script>
</head>
<body>

<p>---------------get checkBox value----------------</p>
<button οnclick="getAllCheckBox()">Get All CheckBox Value</button>
<button οnclick="getSelectCheckBox()">Get Select CheckBox Value</button>
<p>
<input type="checkbox" name="testCheckBox" value="checkBox1"/>
<input type="checkbox" name="testCheckBox" value="checkBox2"/>
<input type="checkbox" name="testCheckBox" value="checkBox3"/>
<input type="checkbox" name="testCheckBox" value="checkBox4"/>
</p>

<p>---------------get select value----------------</p>
<button οnclick="getAllSelect()">Get All Select Value</button>
<button οnclick="getSelectSelect()">Get Select Select Value</button>
<p>
<select id="testSelect" name="testSelect">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
</p>

<p>---------------get mutiple select value----------------</p>
<button οnclick="getAllMSelect()">Get All Select Value</button>
<button οnclick="getSelectMSelect()">Get Select Select Value</button>
<p>
<select id="testMSelect" name="testMSelect" multiple="multiple">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
</select>
</p>

</body>
</html>

效果图：

主要是来获得checkbox和select option的文本和值。现在还没用到过radio，不过我相信也是这个道理，下次再研究吧

http://blog.csdn.net/yhjhoo/archive/2009/11/06/4776895.aspx 链接是转到我以前转载别人的select选择符的一些内容，很有帮助

yhjhoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 操作checkbox 和select

以前早就想写篇这样的文章，每次遇到这个问题总是想一阵子，然后按照解题的思路走一遍，走了很多重复的路。所幸今天有空，就写了下来。代码大概如下，懒得兄弟可以直接到附件里面下载直接看效果写道&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1...
复制链接

扫一扫