jquery操作复选框、单选框、下拉列表框

最新推荐文章于 2022-09-02 14:03:06 发布
iteye_21199
最新推荐文章于 2022-09-02 14:03:06 发布
阅读量247
点赞数
文章标签： xhtml 前端 javascript ViewUI
以前在开发前端表单验证时，会经常使用到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 str = '';
		$("input[name=get_checkbox_value]").each(function(){
			str+=$(this).val()+"--";  
		});
		alert(str);
	});
	//选中复选框
	$("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>