jquery如何根据多选框name来获得选中的值。

根据多选框name来获得选中的值可用如下 jquery代码实现

$("input:checkbox[name='test']:checked").each(function() { // 遍历name=test的多选框
  $(this).val();  // 每一个被选中项的值
});

实例演示:给出两组多选框,点击按钮后分别获得两组中被选择的项目

示例代码如下

  1. 创建Html元素

    <div class="box">
    	<span>请输入用户名,限定字母、数字或下划线的组合:</span><br>
    	<div class="content">
    		<span>水果:</span><br>
    		<input type="checkbox" name="fruit" value="梨子"/>梨子
    		<input type="checkbox" name="fruit" value="李子"/>李子
    		<input type="checkbox" name="fruit" value="栗子"/>栗子
    		<input type="checkbox" name="fruit" value="荔枝"/>荔枝<br>
    		<span>蔬菜:</span><br>
    		<input type="checkbox" name="vegetable" value="青菜"/>青菜
    		<input type="checkbox" name="vegetable" value="萝卜"/>萝卜
    		<input type="checkbox" name="vegetable" value="土豆"/>土豆
    		<input type="checkbox" name="vegetable" value="茄子"/>茄子
    	</div>		
    	<input type="button" value="提交">
    </div>
  2. 设置css样式

    div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
    div.box span{color:#999;font-style:italic;}
    div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
    input[type='checkbox']{margin:5px;}
    input[type='button']{height:30px;margin:10px;padding:5px 10px;}
  3. 编写jquery代码

    $(function(){
    	// 设置属性值
    	$("input:button").click(function() {
    		var fruit = "";
    		var vegetable = "";
    		$("input:checkbox[name='fruit']:checked").each(function() {
    			fruit += $(this).val() + " ";
    		});
    		$("input:checkbox[name='vegetable']:checked").each(function() {
    			vegetable += $(this).val() + " ";
    		});
    		alert("已选择水果:"+fruit+",已选择蔬菜:"+vegetable);
    			
    	});
    })

没有更多推荐了,返回首页