HTML select、input radio实用知识总结

 1、select下拉框

<!-- select元素属性：
	multiple="multiple" 多选
	disabled="disabled" 禁用 -->
	<select>
		<option>中国</option>
		<!-- option元素属性：
		disabled="disabled" 禁用
		selected="selected" 选中-->
		<option id="op" value="America" >美国</option>
		<option>法国</option>
		<option>英国</option>
	</select>
	
	<button id="select-btn">测试select</button>
	
	<script type="text/javascript">
		$("#select-btn").bind('click',function(){
			//动态选中option，其值可以为selected,true,false,或者直接设置select元素的值来选中option
			//$("#op").attr('selected',true);
			$("select").val('America');
			//但是通过js代码选中option不会触发change事件，这时要主动调用change事件函数
			$("select").trigger("change");
			/* 如果上面的值设为true或false,则selected属性的值为selected,如果设为false,则为undefined,
			且通过鼠标点击选中其他option不影响其值 */
			console.log($("#op").attr('selected'));
			//获取option的值
			console.log($("#op").val());
			//获取option的显示文本
			console.log($("#op").text());
			//select框的值就是当前选中的option的值
			console.log('select框的值：'+$("select").val());
			
		});
		
		$("select").bind('change',function(){
			console.log('change事件:'+$("select").val());
		});
	</script>

2、input radio单选按钮

input checkbox即复选框用法与单选按钮类似

<!-- input radio属性：
	 disabled="disabled" 禁用
    checked="checked" 选中 -->
	<label>
		<input id="radio-1" type="radio" name="sex" value="男" checked="checked">
		男
	</label>
	<label>
		<input id="radio-2" type="radio" name="sex" value="女">
		女
	</label>
	
	<button id="radio-btn">测试radio</button>
	
	<script type="text/javascript">
		$("#radio-btn").bind('click',function(){
			//jquery判断哪个单选按钮是否被选中，动态切换男女按钮选中状态
			 if($("#radio-1").is(':checked')){
			 	//当前男被选中
			 	//让男不选中
			 	$("#radio-1").attr('checked',false);
			 	//让女选中
			 	$("#radio-2").attr('checked','checked');
			 	//触发点击事件
			 	$("#radio-2").trigger('click');
			 	
			 }else{
			    //当前女被选中
			    //让女不选中
				 $("#radio-2").attr('checked',false);
			    //让男选中
				 $("#radio-1").attr('checked','checked');
			    //触发点击事件
				 $("#radio-1").trigger('click');
			 }
			
		});
		
		//给每个单选按钮注册单击事件
		$("input[name='sex']").each(function(){
			$(this).bind('click',function(){
				console.log($(this).val());
			});
		});
		
	</script>