HTML select、input radio实用知识总结

旧城等待， 2022-05-09 05:52 248阅读 0赞

#  1、select下拉框 #

<select>
    		<option>中国</option>
    		
    		<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即复选框用法与单选按钮类似

<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>