十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
jquery的遍历方法可以获取复选框所欲的选中值
公司主营业务:做网站、网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出盐亭免费做网站回馈大家。
$("input:checkbox:checked").each(function(index,element)); // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值
$("input:checkbox:checked").map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象
实例演示:点击按钮获取checkbox的选中值
创建Html元素
div class="box"
span点击按钮获取checkbox的选中值:/spanbr
div class="content"
input type='checkbox' name='message' value='1'/发送短信
input type='checkbox' name='message' value='2'/发送邮件
/div
input type="button" value="提交"
/div
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{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);
});
});
style type="text/css" media="screen"
*{margin:0;padding:0;}
body{font-size: 16px;color: #000;padding: 50px;}
.dowebok dl{position: relative;width: 180px;}
.dowebok dl dt{border:#ddd solid 1px;height: 28px;line-height: 28px;font-size: 14px;padding-left: 5px;overflow: hidden;}
.dowebok dl dt b{display: block;position: absolute;top: 5px;right:15px;width: 10px;height: 10px;border:#333 solid 1px;border-width: 0 0 1px 1px;transform:rotate(-45deg);}
.dowebok dl dd{position: absolute;width: 100%;left: 0px;top: 30px;border:#ddd solid 1px;border-top:0px;box-sizing: border-box;display: none;}
.dowebok dl dd span{display: block;height: 30px;line-height: 30px;text-align: center;font-size: 14px;color: #666;background: #fff;}
.dowebok dl dd span:hover{background-color: #139ff1;}
/style
div class="dowebok"
dl
dtspan请选择/spanb/b/dt
dd
span天津/span
span杭州/span
span北京/span
/dd
/dl
/div
script
$(function(){
$('.dowebok dl dt').click(function(){
$(this).siblings('dd').toggle(); //下拉隐藏显示
})
$('.dowebok dl dd span').click(function(){
var html = $(this).html();
$('.dowebok dl dt').find('span').html(html);
$('.dowebok dl dd').hide();
})
//判断点击其他地方时候下拉列表隐藏
$("body,html").on("mousedown",function(e){
var target=$(e.target);//该点击目标对象
if(!(target.closest(".dowebok dl dd").length) !(target.closest('.dowebok dl dt').length) !(target.closest(self).length) $(".dowebok dl dd").is(":visible")){
$(".dowebok dl dd").css({"display":"none"});
}
})
});
/script
//首先,你的想法和思路是对的,但你忽略了一个问题,jquery的选择器中表达式是操作dom的,
//用变量连接表达式,看似没毛病,但实际在jquery中的实现是不能正常执行的。它当成了一个
//完整的表达式执行,所以不能正确选择到元素。因此代码修改成以下:
var selector = ":checkbox[name='gant'][mtype='" + qx + "']";
$(selector).attr("checked", true);
//到此,成功执行!
希望能帮到你!