jquery操作复选框、单选框、下拉列表框
2013-03-20 17:34
676 查看
以前在开发前端表单验证时，会经常使用到jquery来做验证，但是有一些表单的获取、设置、指定操作比较麻烦，有时会经常查文档，今天闲来无事，便把几个常用的表单汇总了翻。先上效果图
jquery操作复选框、单选框、下拉列表框
不多说，贴上源码
jquery操作复选框、单选框、下拉列表框
不多说，贴上源码
<!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操作汇总</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<style type="text/css">
<!--
.STYLE2 {font-weight: bold}
-->
</style>
</head>
<script>
$(function(){
//jquery实现对复选框操作 start
//获取复选框的值
$("input[name=get_checkbox_value]").click(function(){
var get_checkbox_value = $("input[name=get_checkbox_value]:checked").val();
if(get_checkbox_value != undefined){
alert(get_checkbox_value);
}else{
alert('没有被选中值！');
}
});
//获取所有选择项的值
$("#get_checkbox_value").click(function(){
var chk_value =[];
$('input[name="get_checkbox_value"]:checked').each(function(){
chk_value.push($(this).val());
});
alert(chk_value);
});
//选中复选框
$("input[name=check_checkbox]").click(function(){
alert('请点击后面的文字');
$(this).removeAttr("checked");
return false;
});
//指定选择项
$("#check_checkbox").click(function(){
if($("input[name=check_checkbox]:eq(0)").attr("checked")){
$("#check_checkbox").html('点击选中选项一');
$("input[name=check_checkbox]:eq(1)").attr("checked",true);
$("input[name=check_checkbox]:eq(0)").removeAttr("checked");
}else{
$("#check_checkbox").html('点击选中选项二');
$("input[name=check_checkbox]:eq(0)").attr("checked",true);
$("input[name=check_checkbox]:eq(1)").removeAttr("checked");
}
});
//全选/反选
$("input[name=all_checkbox_check]").click(function(){
var all_checkbox_check = $("input[name=all_checkbox_check]:checked").val();
if(all_checkbox_check!==undefined){
$("input[name=all_checkbox]").attr("checked",true);
}else{
$("input[name=all_checkbox]").attr("checked",false);
}
});
//选中所有基数或者偶数
$("input[name=all_checkbox_even]").click(function(){
var all_checkbox_even = $("input[name=all_checkbox_even]:checked").val();
if(all_checkbox_even!==undefined){
$("input[name=all_checkbox]:even").attr("checked",true);
$("input[name=all_checkbox]:odd").removeAttr("checked");
}else{
$("input[name=all_checkbox]:odd").attr("checked",true);
$("input[name=all_checkbox]:even").removeAttr("checked");
}
});
//反选功能
$("input[name=all_checkbox_opp]").click(function(){
$("input[name=all_checkbox]").each(function(){
if($(this).attr("checked")){
$(this).removeAttr("checked");
}else{
$(this).attr("checked",true);
}
});
});
//jquery实现对复选框操作 end
//jquery实现对单选框操作 start
//获取单选框值
$("#get_radio").click(function(){
var get_radio = $("input[name=get_radio]:checked").val();
if(get_radio!==undefined){
alert(get_radio);
}else{
alert("请选择其中一项");
}
});
//指定选择其中一项
$("#check_radio").click(function(){
if($("input[name=check_radio]:eq(0)").attr("checked")){
$("#check_radio").html('点击选中选项一');
$("input[name=check_radio]:eq(1)").attr("checked",true);
$("input[name=check_radio]:eq(0)").removeAttr("checked");
}else{
$("#check_radio").html('点击选中选项二');
$("input[name=check_radio]:eq(0)").attr("checked",true);
$("input[name=check_radio]:eq(1)").removeAttr("checked");
}
});
//jquery实现对单选框操作 end
//jquery实现对下拉列表操作 start
//获取下拉列表选项值
$("select[name=get_select]").change(function(){
var get_select = $(this).val();
alert(get_select);
});
//下拉列表多项选择
$("select[name=more_select[]]").blur(function(){
var more_select=$(this).val();
alert(more_select);
});
//指定选择下拉列表值
$("input[name=set_radio]").click(function(){
var set_radio = $(this).val();
$("select[name=set_select]").val(set_radio);
});
//jquery实现对下拉列表操作 end
});
</script>
<body>
<table width="796" border="0">
<tr>
<td width="222" height="26" bgcolor="#00CC33">jquery实现对复选框操作</td>
<td width="564" bgcolor="#00CC33"> </td>
</tr>
<tr>
<td height="31" align="right">获取复选框的值</td>
<td>
<label>
<input type="checkbox" name="get_checkbox_value" value="checkbox1" />选项一 </label>
<label>
<input type="checkbox" name="get_checkbox_value" value="checkbox2" />选项二 </label>
<label>
<input type="submit" name="Submit" id="get_checkbox_value" value="获取所有值" />
</label></td>
</tr>
<tr>
<td align="right">指定选中复选框</td>
<td><label>
<input type="checkbox" name="check_checkbox" value="checkbox1" />
选项一 </label>
<label>
<input type="checkbox" name="check_checkbox" value="checkbox2" />
选项二 </label><span id="check_checkbox" style="cursor:pointer; color:#FF0000;">点击选中选项一</span></td>
</tr>
<tr>
<td align="right">操作复选框全选</td>
<td><label>
<input type="checkbox" name="all_checkbox" value="checkbox1" />
选项一 </label>
<label>
<input type="checkbox" name="all_checkbox" value="checkbox2" />
选项二 </label>
</label>
<label>
<input type="checkbox" name="all_checkbox" value="checkbox3" />
选项三 </label>
<label>
<input type="checkbox" name="all_checkbox" value="checkbox4" />
选项四 </label><br />
<label>
<span class="STYLE2">
<input type="checkbox" name="all_checkbox_check" value="checkbox1" />
全选
/反选 </span></label>
<strong>
<label>
<input type="checkbox" name="all_checkbox_even" value="checkbox2" />
全选基数项/
偶数项</label>
<label> </label>
<label>
<input type="checkbox" name="all_checkbox_opp" value="checkbox2" />
反选 </label>
</strong>
<label></label></td>
</tr>
<tr>
<td bgcolor="#00CC33">jquery实现单选框操作</td>
<td bgcolor="#00CC33"> </td>
</tr>
<tr>
<td align="right">获取单选框值</td>
<td>
<label>
<input type="radio" name="get_radio" value="radiobutton1" />
选项一</label>
<label>
<input type="radio" name="get_radio" value="radiobutton2" />
选项二</label>
<input type="submit" name="Submit2" id="get_radio" value="获取选中值" /></td>
</tr>
<tr>
<td align="right">指定选中单选框</td>
<td><input type="radio" name="check_radio" value="radiobutton" />
选项一
<input type="radio" name="check_radio" value="radiobutton" />
选项二<span id="check_radio" style="cursor:pointer; color:#FF0000;">点击选中选项一</span> </td>
</tr>
<tr>
<td bgcolor="#00CC33">jquery实现下拉列表操作</td>
<td bgcolor="#00CC33"> </td>
</tr>
<tr>
<td align="right">获取下拉列表的值</td>
<td><select name="get_select">
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="选项三">选项三</option>
<option value="选项四">选项四</option>
</select></td>
</tr>
<tr>
<td align="right">下拉列表多项值</td>
<td><select size="4" multiple="multiple" name="more_select[]">
<option value="option1">选项一</option>
<option value="option2">选项二</option>
<option value="option3">选项三</option>
<option value="option4">选项四</option>
</select></td>
</tr>
<tr>
<td align="right">指定选择下拉列表值</td>
<td><select name="set_select">
<option value="option1">选项一</option>
<option value="option2">选项二</option>
<option value="option3">选项三</option>
<option value="option4">选项四</option>
</select>
<label> <input type="radio" name="set_radio" value="option1" />
选项一</label><label>
<input type="radio" name="set_radio" value="option2" />
选项二</label><label>
<input type="radio" name="set_radio" value="option3" />
选项三</label><label>
<input type="radio" name="set_radio" value="option4" />
选项四</label></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 下拉列表操作 select 复选框 checkbox 单选框 radio
- jquery 操作单选框，复选框，下拉列表实现代码
- jquery 操作单选框，复选框，下拉列表实现代码
- jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
- jquery 操作单选框，复选框，下拉列表实现代码
- jQuery 下拉列表操作 select 复选框 checkbox 单选框 radio
- jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
- jQuery 操作下拉列表框（转）
- Jquery操作下拉列表和复选框，自定义下拉
- 实战jquery取复选框、单选框、下拉列表等的值
- jQuery对下拉框,单选框,多选框的操作
- 自制的操作下拉列表框（SELECT）的三个jquery插件（ajax填充、联动、增加选项）
- Jquery单选框、复选框、下拉框动态设置默认项，及动态获取选中项。
- JQuery为下拉列表、复选框、单选框赋值
- Jquery操作下拉列表和复选框，自定义下拉
- 利用jquery操作select下拉列表框
- 利用jquery操作select下拉列表框
- JQuery操作select下拉列表框
- JQuery操作select下拉列表框
- 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]