jquery 表单操作（一）

最新推荐文章于 2022-11-22 10:34:00 发布

Chocolate_tai

最新推荐文章于 2022-11-22 10:34:00 发布

阅读量357

点赞数

分类专栏： js && jquery 文章标签： jquery js 表单

本文链接：https://blog.csdn.net/qq_18415717/article/details/49467861

版权

js && jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、文本框

用户名：<input type="text" name="username"  id="username"/>

获取文本框的输入值：

var username=$("input[name='username']").val();

2、checkbox 多项选择

       用户兴趣:<input type="checkbox" name="interest" value="足球"/>足球
		<input type="checkbox" name="interest" value="篮球"/>蓝球
		<input type="checkbox" name="interest" value="羽毛球"/>羽毛球
		<input type="checkbox" name="interest" value="游泳"/>游泳<br/>

获取选中的多选框的值：

因为选中的值可能是多个，这里用一个数组来存储和操作

 function checkArray(){
	  	var val=$("input[name='interest']:checked");
                if (val.length>0) {
            	  var interests= new Array();
	  		      $(val).each(function(n){
	  			    interests.push($(this).val());
	  		      });
                };
                return(interests);
	  	    }

checkbox的一个例子，实现全选功能：

注意：

①判断选择框是否选中：

var sel = $(this).is(':checked');

选中返回true，没选中返回false

②设置选择框的选中状态

$(this).prop("checked",true);

一开始使用attr('checked',true)不管用，后来发现貌似新版本都用prop('checked',true)

<!DOCTYPE html>
<html>
<head>
	<title>多选框的全选</title>
	<meta charset="utf-8">
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
    $(function(){
        $("#sel").click(function(){
            var sel = $(this).is(':checked');
            $("#xm input").each(function(){
                if (sel==true) {
                    $(this).prop("checked",true);
                    $("#sel").next("span").html("全取消");
                }else{
                    $(this).prop("checked",false);
                    $("#sel").next("span").html("全选");
                }
                
            });
        });
    });
	</script>
</head>
<body>
<p>你最喜爱的运动是</p>
<p>
	<input id="sel" type="checkbox" value="全选/全不选"><span>全选</span>
</p>
<p id="xm">
	<input type="checkbox" value="足球">足球
	<input type="checkbox" value="篮球">篮球
	<input type="checkbox" value="羽毛球">羽毛球
	<input type="checkbox" value="乒乓球">乒乓球
</p>
</body>
</html>

3、select中的option

用户户籍:<select name="address" id="address">
				<option value="1">北京</option>
				<option value="2">上海</option>
				<option value="3">昭通</option>
				<option value="4">彝良</option>
		</select>	<br/>

①option的选中方式：

var val=$("#address option:checked");

②发现对于option .val() 只能获取到选项所在的数字位置，而.text()才能获取到相应的文本

这一点和checkbox是不一样的

function checkArray1(){
	  	 var val=$("#address option:checked");
                if (val.length>0) {
            	  var interests= new Array();
	  		      $(val).each(function(n){
	  			    interests.push($(this).text());
	  		      });
                };
                return(interests);
	  	    }

Chocolate_tai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 表单操作（一）

1、文本框用户名：获取文本框的输入值：var username=$("input[name='username']").val();2、checkbox 多项选择用户兴趣:足球蓝球羽毛球游泳获取选中的多选框的值：因为选中的值可能是多个，这里用一个数组来存储和操作 function checkArray(){ var val
复制链接

扫一扫