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

最新推荐文章于 2022-09-02 14:03:06 发布
最新推荐文章于 2022-09-02 14:03:06 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haibrothers/article/details/8697557
版权

以前在开发前端表单验证时，会经常使用到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>


haibrother
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现动态添加文本框和下拉框效果
07-03
jquery实现动态添加文本框和下拉框效果。
jquery实现下拉复选框
03-31
一个js的方法，调用该js可实现下拉复选框。 /**//** * Creat date 2011-11-10 * Creat by zhuoyueping *支持input表单的下拉复选框。 *使用方法： * (1)调用js函数：setSelectBox(textItem, myArray); * 参数说明： * textItem：input表单元素 * myArray：二维数组，存放下拉框中的key-value对。 * (2)特别说明：全局变量均以_开头，有如下2个，使用时注意命名冲突： _csidiv _csiinput * (3)使用实例： <html> <head> <title>my test</title> [removed][removed] [removed][removed] [removed] function testSelectBox(textItem) { var myArray = new Array(); myArray['one'] = 1; myArray['two'] = 2; myArray['three'] = 3; myArray['4'] = 4; myArray['5'] = 5; myArray['6'] = 6; myArray['7'] = 7; myArray['8'] = 8; setSelectBox(textItem, myArray); } [removed] </head> <body> <form id="mainForm"> 实例 在此控件下方显示下拉复选框 <input id="input" /> <input type="button" id="Text1" /> </form> </body> </html> */
jQuery实现下拉框并且带有复选框功能
咸鱼咸鱼咸
10-24 2863
因为项目上的需要，需要实现一个下拉框并且带有复选框功能，在网上找了找插件，没有找到合适的，所以就自己动手写了一个。写这个博客也相当于备份吧。 效果图如下： 这东西虽然没写过，但实际并不难所以也就没加什么注释了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset...
jQuery 前端复选框 全选 反选 下拉菜单联动
weixin_30388677的博客
07-05 280
jQuery 页面中复选框全选、反选、下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
jQuery下拉式复选框
墨鱼部落格
03-12 654
jQuery下拉式复选框 jQuery制作选择分类点击弹出下拉复选菜单，支持子菜单和主菜单多选效果。这是一款简单实用的复选框菜单选择代码。 演示地址 下载地址
jQuery实现下拉列表复选框 可多选
qdulgh的专栏
09-02 3870
jQuery实现下拉列表复选框，可多选, 将选择的value值以逗号隔开，存到input文本框 id=checkedVal。取消选择时，采用直接替换为空的方式删除，适用于选项值无重复的情况。
JQuery下拉框与复选框
热门推荐
linwei_1029的专栏
02-25 1万+
 1. 先看下一个例子： 首先是一个下拉框      选择资源类型： HTML页面      HTML页面   下载资源   超链接资源   自测题   课件资源   问卷调查   FAQ   文本及附件    之后，通过$(document).ready(function(){  $("#s1").change(function(){   $("#chan
jquery实现分级栏目复选框，下拉复选框
passenger5的博客
09-10 482
下拉复选框 做了一个简单的层级栏目父选框选择，主要功能有： 点击全部选中所有，取消全部取消所有 点击父级选中所有子级，取消父级取消所有子级 取消子级选中，直接和间接父级都取消选中，子级不变 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模拟实现下拉复选框</title> <style> .select{ width: 9
jquery 操作单选框，复选框，下拉列表实现代码
10-29
jquery 操作单选框，复选框，下拉列表实现代码，需要的朋友可以参考下。
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
10-26
jquery操作拉列表、文本框、复选框、单选框集合。各种对下拉列表、文本框、复选框、单选框的jquery的相关操作。做为记录和收藏的最好方法
jQuery.Sumoselect插件实现下拉复选框效果
11-27
该jQuery下拉列表框插件可以单选，也可以多选。它的样式可以通过CSS文件来自定义。它的最大特点是可以跨设备使用，所有设备上功能都是一致的。 该jQuery下拉列表框插件的特点有： 可以进行单选，也可以进行多选。 ...
codeigniter 实现无刷新(ajax)分页
老毕的技术博客
08-06 3120
我们都知道codeigniter（以下都简称CI）有分页的类库，现在我们就基于其原生的类库来创建一个我们所需要的ajax分页。 首先在  /application/libraries/ 目录下建立一个 MY_Pagination.php ，代码如下： <?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends C
jquery 中ajax的所有状态
老毕的技术博客
05-28 2433
一直使用jquery的ajax 来处理异步的问题，其相当的方便，最近因工作项目需求，需要处理异步提交的数据源返回来的各种状态，现分享给大家学习学习，不多说，直接上代码： $(function(){ $("#starts").click(function(){ $.ajax({ type:'POST',
jquery插件 ajaxfileuploa异步上传文件和 ajax 批量请求的处理方法
老毕的技术博客
05-28 2318
因工作需求，碰到这些问题，下面把这些问题及解决方法分享大家  众所周知jquery 的ajax 是相当的简单及实用且兼容各类浏览器，但殊不知其原生不支持 ajax 文件上传，于网上百度查找插件 ajaxfileupload.js ，贴出实例代码： $("#btnSubmit").click(function(){ if($("input[type=file]").val()=
JS在火狐下还可以打印出对象及数组和普通字符
老毕的技术博客
05-30 1361
以前一直使用 js 中的 alert() 和 document.writte() 来调试程序，但不能打印出数组和对象。 今天发现JS在火狐下还可以打印出对象及数组和普通字符，记住只支持火狐哦！这样以后调试JS程序更加方便很多，分享给大家学习 obj.username = 'xiaohai'; obj.password = 'ssss'; console.log(obj); v
ajax 跨域请求处理
老毕的技术博客
03-04 951
我们主要是采用json传输数据的方式处理 JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式） 服务中心 html,body{margin:0;padding:0;} $(function(){
JS 两种方法存和取cookies
老毕的技术博客
03-20 620
//第一种方法 function setCookie(name,value) { var Days = 30; //此 cookie 将被保存 30 天 var exp = new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days*24*60*60*1000); documen
jquery 实现复选框单选
最新发布
05-24
jQuery 实现复选框单选可以通过以下步骤实现： 1. 选中所有的复选框元素，并给它们添加一个 change 事件监听器。 2. 在事件处理程序中，遍历所有的复选框元素，如果某个复选框被选中，则将其他复选框的选中状态设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值