jquery复选框全选获取下拉框的值

女爷i 2022-09-20 16:18 310阅读 0赞

<!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="jquery.1.6.3.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#check").change(function(){
    		alert($(this).val());					  
    	});
    	$("#all").click(function(){
    		$("input[name='boxs']").attr("checked",this.checked); 
    	});
    	var $getbox=$("input[name='boxs']");
    	$getbox.click(function(){
    		$("#all").attr("checked",$getbox.length==$("input[name='boxs']:checked").length ? true:false); 		   	
    	});
    	$("input[type='radio']").get(0).checked=true;   //默认选中
    	$("input[type='radio']").click(function(){      //只选一个
    		var val=$("input[type='radio']:checked").val();
    		if(val==null){
    			alert("请选择一个性别！");
    			return false;
    		}else{
    			alert(val);
    		}
    	});
    });
    </script>
    </head>
    
    <style type="text/css">
    body{ margin:0; padding:0; font:12px"宋体";}
    input,button,select,textarea{outline:none;resize:none;}
    .a{ position:relative; height:35px; margin:10px;}
    .search-field input{ width:400px; height:32px; border:none; background:none; }
    .search-input{float:left; position:relative; width:390px; padding:0 5px; height:30px; *padding:6px 5px 4px 5px; *height:20px; _padding:6px 5px 4px 5px; _height:20px; font-family:"宋体";border-bottom:1px solid #d0d0d0; border-right:1px solid #d0d0d0; overflow:hidden;}
    .search-field .shadow-x{
       position:absolute;
       top:1px;
       left:1px;
       width:399px;
       height:0; 
       border-top:1px solid #d0d0d0;
       border-bottom:1px solid #f0f0f0;
       overflow:hidden;
       z-index:1;
    }
    .search-field .shadow-y{
       position:absolute;
       top:1px;
       left:0; 
       width:0;
       height:30px;
       border-left:1px solid #d0d0d0;
       border-right:1px solid #f0f0f0;
       overflow:hidden;
    }
    .sub{ float:left; width:80px; height:32px; margin-left:5px; margin-top:-1px;}
    </style>
    <body>
    <div class="a">
    	<label>地区：</label>
        <select id="check">
            <option value="0">请选择</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>
    </div>
    <div class="a">
    	<label>爱好：</label>
        <input type="checkbox" value="0" id="all"/>全选
        <input type="checkbox" name="boxs" value="1"/>音乐
        <input type="checkbox" name="boxs" value="2"/>咖啡
        <input type="checkbox" name="boxs" value="3"/>美食
        <input type="checkbox" name="boxs" value="4"/>美图
    </div>
    <div class="a">
    	<label>性别：</label>
        <input type="radio" name="sex" value="0"/>男
        <input type="radio" name="sex" value="1"/>女
    </div>
    
    <div class="a">
    <div id="search-field" class="search-field">
    <form id="search-form">
    <div class="search-input">
        <div class="shadow-x"></div>
        <div class="shadow-y"></div>
        <input type="text" />
    </div>
    <button type="submit" class="sub">谷歌搜索</button>
    </form>
    </div>
    </div>
    
    <div class="a">
    	<textarea rows="5" cols="70"></textarea>
    </div>
    </body>
    </html>