欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

JQuery:单选框,复选框取值

美国西岸机房 添加于 2011-12-26   jquery单选框jquery复选框jquery取值

jquery教程

相信对于刚接触JQuery的朋友来说,还是不太清楚Jquery怎么获取单选框和复选框的值;我们怎么使用Jquery取得页面中单选框,复选框的值呢?其实非常简章的。下面给大家一个例子一看就明白了。

<div style="width:100%; border:solid 1px #0000ff; line-height:25px">    
    <input type="radio" name="items" id="item1" value="1" checked="checked" />1
    <input type="radio" name="items" id="item2" value="2"/>2
    <input type="radio" name="items" id="item3" value="3"/>3
    <input type="radio" name="items" id="item4" value="4"/>4
    <input type="radio" name="items" id="item5" value="5"/>5
    <input id="bt_radio" type="button" value="单选框测试">
</div>
<script type="text/javascript"> 
$(document).ready(function(){    
	$("#bt_radio").click(function(){
		alert($("input[@name=items][@checked]").val());                
	})
})
</script>

<div style="width:100%; border:solid 1px #0000ff; line-height:25px">
    <input type="checkbox" name="cbType1" id="cbType1" value="1" checked/>1
    <input type="checkbox" name="cbType1" id="cbType2" value="2" />2
    <input type="checkbox" name="cbType1" id="cbType3" value="3" checked />3
    <input type="checkbox" name="cbType1" id="cbType4" value="4" checked />4
    <input id="bt_checkbox" type="button" value="多选框测试">
</div>
<script type="text/javascript"> 
$(document).ready(function(){
	$("#bt_checkbox").click(function(){
		var aa = "";
		$("input[@name=cbType1][@checked]").each(function(){
			aa += $(this).val() + ",";
		})
		alert(aa);
	})
})
</script>    
        
<div style="width:100%; border:solid 1px #0000ff; line-height:25px">
    <input type="checkbox" name="cbType2" id="cbType21" value="1" checked/>1
    <input type="checkbox" name="cbType2" id="cbType22" value="2" />2
    <input type="checkbox" name="cbType2" id="cbType23" value="3" checked />3
    <input type="checkbox" name="cbType2" id="cbType24" value="4" checked />4
    <input id="bt_checkbox2" type="button" value="多选框测试2">
</div>
<script type="text/javascript"> 
$(document).ready(function(){
	$("#bt_checkbox2").click(function(){
		var aa = "";
		$("input[@name=cbType2]").each(function(){
			if(this.checked) aa += this.value + ",";
		})
		alert(aa);
	})
})
</script>

注:以上代码有可能在高版本的Jquery中出错,如果出错请将 @name  前面的 @ 符号去掉,在非IE内核的浏览器中如果无法正常获取选中的值请使用如下格式获取

$(":radio[name='cbType2']:checked");

零度科技原文链接:http://www.ldisp.com/a/jquery/2010/537.shtml

上一篇:没有了
下一篇:JQuery中对option的添加、删除、取值

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

851

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理