jquery 操作checkbox 和select

yhjhoo

浏览: 154351 次
性别:
来自: 郑州

最近访客更多访客>>

jxp1314

makeshow

dwdyoung

mohuanzhen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端开发

jQuery JavaScript XHTML HTML .net

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

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

写道

<!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 onclick="getAllCheckBox()">Get All CheckBox Value</button>
<button onclick="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 onclick="getAllSelect()">Get All Select Value</button>
<button onclick="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 onclick="getAllMSelect()">Get All Select Value</button>
<button onclick="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>

效果图：