单选框radio、复选框checkbox、下拉菜单select的选中问题

在前后端交互的时候，我们经常要取数据、传数据、对得到的数据进行处理。从前端取数据的时候，最常见的就是input框，当它的类型是text或者password的时候还好说，毕竟只是一个input框，怎样都可以取到它的value。但要是单选框或者多选框，再或者下拉菜单呢？我们又该如何去取数据，这是一个值得思考的问题。

单选框选中问题

//input.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
		</style>
		<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
    </script>
	</head>
	<body>
        <ul class="two">
			<li>
				<input type="radio" name="lanmu" value="这是栏目一" /><em>这是栏目一</em>
			</li>
			<li>
				<input type="radio" name="lanmu" value="这是栏目二" /><em>这是栏目二</em>
			</li>
			<li>
				<input type="radio" name="lanmu" value="这是栏目三" /><em>这是栏目三</em>
			</li>
			<li>
				<input type="radio" name="lanmu" value="这是栏目四" /><em>这是栏目四</em>
			</li>
		</ul>
		<input type="button"  id="btn2" value="提交" />
    </body>
	<script type="text/javascript">
        //点击获取单选radio框的选中事件
        $("#btn2").click(function(){
			var a = $("input[name='lanmu']:checked").val()
			console.log(a)	
        })
        //单选框选中取消事件
        $('input:radio').click(function(){
            var domName = $(this).attr('name');
            var $radio = $(this);
            // 如果之前被选中
            if ($radio.data('waschecked') == true){
                $radio.prop('checked', false);
                $("input:radio[name='" + domName + "']").data('waschecked',false);
                //$radio.data('waschecked', false);
            } else {
                $radio.prop('checked', true);
                $("input:radio[name='" + domName + "']").data('waschecked',false);
                $radio.data('waschecked', true);
            }
        });
	</script>
</html>

复选框选中问题

 //input.html
//主要代码
 <ul class="three">
	<li>
		<input type="checkbox" name="hobby" value="看书" /><em>看书</em>
	</li>
	<li>
		<input type="checkbox" name="hobby" value="读报" /><em>读报</em>
	</li>
	<li>
		<input type="checkbox" name="hobby" value="喝茶" /><em>喝茶</em>
	</li>
	<li>
		<input type="checkbox" name="hobby" value="跑步" /><em>跑步</em>
	</li>
</ul>
<input type="button"  id="btn3" value="提交" />

//js逻辑
<script type="text/javascript">
//点击获取多选框checkbox选中事件
		var s = $("input[name='hobby']")
		s.map(function(item,i){
			$(this).click(function(){
				var _this = this
				$("#btn3").click(function(){
					if(_this.checked){
						console.log($(_this).val())
					}
				})
			})
		})
</script>

上面复选框的到选中值的逻辑写法还可以是下面这几种写法，主要是遍历的方法差异

//写法二
var s = $("input[name='hobby']")
s.each(function(i){
	$(this).click(function(){
		var _this = this
		$("#btn3").click(function(){
			if(_this.checked){
				console.log($(_this).val())
			}
		})
	})
})
//写法三
var groupCheck = $("input[name='hobby']")
for(var i=0;i<groupCheck.length;i++){
	$(groupCheck[i]).click(function(){
		var _this = this
		$("#btn3").click(function(){
			if(_this.checked){
				console.log($(_this).val())
			}
		})
	})
}
//写法四
$("#btn3").click(function(){
    obj = document.getElementsByName("hobby");
		    check_val = [];
		    for(k in obj){
		        if(obj[k].checked)
		            check_val.push(obj[k].value);
		    }
    console.log(check_val)
})

下拉菜单选中问题

//input.html主要代码
<select name="n1" class="one">
	<option value="吃">吃</option>
	<option value="喝">喝</option>
	<option value="玩">玩</option>
	<option value="乐">乐</option>
</select>
<input type="button"  id="btn1" value="抽签" />

//逻辑
<script type="text/javascript">
//点击按钮可以取到select里面的值
$("#btn1").click(function(){
	console.log($("select").val())
})
</script>

下拉菜单里面注意事件的选择，不同的事件选择有着不同的结果

// 1.会触发多次，点击就会触发
$("select").click(function(){
	console.log($(this).val())
})
//2.只触发一次
$("select").one("click",function(){
	console.log($(this).val())
})
//3.当改变时候触发
$("select").change(function(){
	console.log($(this).val())
})

单选框radio、复选框checkbox、下拉菜单select的选中问题

猜你喜欢