
$("input:checkbox:checked")each(function(index,element)); // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值
$("input:checkbox:checked")map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象
实例演示:点击按钮获取checkbox的选中值
创建Html元素
<div class="box">
<span>点击按钮获取checkbox的选中值:</span>
<div class="content">
<input type='checkbox' name='message' value='1'/>发送短信
<input type='checkbox' name='message' value='2'/>发送邮件
</div>
<input type="button" value="提交">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
divbox>span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
编写jquery代码
$(function(){
$("input:button")click(function() {
text = $("input:checkbox[name='message']:checked")map(function(index,elem) {
return $(elem)val();
})get()join(',');
alert("选中的checkbox的值为:"+text);
});
});
思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中)。
1、HTML结构
<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span>
<input type='button' value='提交' onclick="show()"/>
2、javascript代码:
function show(){
obj = documentgetElementsByName("test");
check_val = [];
for(k in obj){
if(obj[k]checked)
check_valpush(obj[k]value);
}
alert(check_val);
}
扩展资料
jQuery对checkbox的各种 *** 作:
1、根据id获取checkbox:
$("#cbCheckbox1");
2、获取所有的checkbox:
$("input[type='checkbox']");//or
$("input[name='cb']");
3、获取所有选中的checkbox:
$("input:checkbox:checked");//or
$("input:[type='checkbox']:checked");//or
$("input[type='checkbox']:checked");//or
$("input:[name='ck']:checked");
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)