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

最新推荐文章于 2024-07-19 03:19:36 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-07-19 03:19:36 发布

阅读量536

点赞数

分类专栏： div+css 文章标签： jquery 复选框 div css 搜索

本文链接：https://blog.csdn.net/boyit0/article/details/38112285

版权

div+css 专栏收录该内容

89 篇文章 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>