【Jquery】- 表单、表格、复选框

绝地灬酷狼 2022-10-02 09:51 247阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## Jquery 表单Form操作 ##

**界面**

**js操作逻辑**

/*$("input[type='text']:enabled")
       *获取含有属性type=text并且类型为enabled的input元素(enabled)
       */
       $("#b1").click(function(){
    	   $("input[type='text']:enabled").css("background","red");
           $("input[type='text']:enabled").val("enabled");    
    	   $("input[type='text']:disabled").css("background","yellow");
           $("input[type='text']:disabled").val("disabled"); 
       });
       
       //:checkbox：选中表单元素checkbox
       $("#b2").click(function(){
    	   //var $checkboxs=$("input[type='checkbox']:checked");
           var $checkboxs=$(":checkbox:checked");
    	      alert("多选框选中数："+$checkboxs.length);
       });
       
       $("#b3").click(function(){
    	  
           var $selects=$("select option:selected");
    	   //便利selects数组中的元素 i序号 n成员对象
    	   $selects.each(function(i,n){
    	       alert("多选框选中数："+$(n).val());
    	   });  
       });

**效果：**

![087f6d6be9ab3e97c168626c2460436df77.jpg][]

--------------------

## Jquery Table元素动态创建 ##

**界面**

用户：<input type="text" id="user"/>
    邮箱：<input type="text" id="mail"/>
    手机：<input type="text" id="phone"/>
    <br>
    <button id="b1">添加</button><br>
    <table border=1 id="table">
    <tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></tr>
    <tr><td>zhangsan</td><td>aaa@qq.com</td><td>25652463</td><td><a href="##">delete</a></td></tr>
    </table>

**js操作逻辑**

$("#b1").click(function(){
    var $user=$("#user");
    var $mail=$("#mail");
    var $phone=$("#phone");
    
    //组装对象
    $tr=$("<tr></tr>");
    $td1=$("<td></td>");
    $td1.text($user.val());
    
    $td2=$("<td></td>");
    $td2.text($mail.val());
    
    $td3=$("<td></td>");
    $td3.text($phone.val());
    
    $td4=$("<td></td>");
    
    $href=$("<a></a>");
    $href.attr("href","##");
    $href.text("delete");
    $td4.append($href);
    
    $href.click(function(){
    if(window.confirm("确定删除？")){
      //这里使用this表示当前事件绑定对象---？ $(this)不能用$(href)代替，否则会认为每次都是最新对象，原有对象的行为不能保存
      $(this).parent().parent().remove();  
    }else{
       return;
    }
    });
    
    $("#table").append($tr);
    	$tr.append($td1);
    	$tr.append($td2);
    	$tr.append($td3);
    	$tr.append($td4);
    });

![aa46b5d9714db9c1b80196bdc65aad8564d.jpg][]

## Jquery 多选框 checkbox ##

**界面**

**js操作逻辑**

$("#c1").click(function(){
    if(this.checked){
    	$("input[name='interst']").attr("checked","checked");
    }else{
    	//$("input[name='interst']").attr("checked",""); //等价于
    	$("input[name='interst']").removeAttr("checked");
    }
    });
    
    $("#b1").click(function(){
    	$("input[name='interst']").attr("checked","checked");
    });
    
    $("#b2").click(function(){
    	$("input[name='interst']").attr("checked","");
    });
    
    $("#b3").click(function(){
    	$("input[name='interst']").each(function(){
    	if(this.checked){
    		this.checked="";
    	}else{
    		this.checked="checked";
    	}
    	});
    });
    
    $("#b4").click(function(){
    $("input[name='interst']:checked").each(function(){
    	alert(this.value);
    });
    });

**效果：**

![8c6cbcd31ac03e583f68f6c3e67f3a46508.jpg][]

转载于:https://my.oschina.net/yangzhiwei256/blog/3016456

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/c99383a6a77d46b5936c0e8e984b78dc.png
[087f6d6be9ab3e97c168626c2460436df77.jpg]: /images/20220113/27ed3d8bc34846f69337066c0c627d61.png
[aa46b5d9714db9c1b80196bdc65aad8564d.jpg]: /images/20220113/420cec307d7640929318c918a7d30914.png
[8c6cbcd31ac03e583f68f6c3e67f3a46508.jpg]: /images/20220113/44d5089e34b3408aaf743e6a59d09d6d.png