我尝试在单击Bootstrap .btn
标签时序列化单选按钮。
于飞:
<div class="btn-group" data-toggle="buttons">
<label label-default="" class="btn btn-primary">
<input id="option1" name="options" type="radio" value="1">Option 1</label>
<label label-default="" class="btn btn-primary active">
<input id="option2" name="options" type="radio" value="1">Option 2</label>
<label label-default="" class="btn btn-primary">
<input id="option3" name="options" type="radio" value="1">Option 3</label>
</div>
查询:
$(".btn").on('click', function(){
console.log("Name: " + $(this).children('input').attr('name') );
console.log("Value: " + $(this).children('input').val() );
console.log("Serialized: " + $(this).children('input').serialize() );
})
名称和值总是出现在我的输出中,但是序列化间歇性地工作(有时返回序列化的值,有时返回空字符串),我不知道为什么。
演示网址:http://www.bootply.com/86422#
谢谢你!
2条答案
按热度按时间mrphzbgm1#
如果您遇到问题,您真的应该阅读所有关于jQuery的
.serialize()
函数的文档。来自**.serialize() API**:
注意事项:只有“successful controls”被序列化为字符串。由于表单不是使用按钮提交的,因此没有提交按钮值被序列化。对于要包含在序列化字符串中的表单元素的值,元素必须具有名称属性。复选框和单选按钮中的值(类型为“radio”或“checkbox”的输入)只有在选中时才包括在内。来自文件选择元素的数据不会序列化。
现在从W3关于成功控制的文档中:
对于共享相同name属性值的单选按钮,只有“on”单选按钮可能成功。
所有这些都解释了为什么它会间歇性地工作。因为有时你碰巧遇到了
check
单选按钮,所以它被认为是"on"
,你的函数序列化了那个输入按钮。解决方法如下:
不要使用单选按钮类型的输入,只需使用普通输入并将显示设置为无。
Bootply Demo
lbsnaicq2#
jQuery
.serialize()
和.serializeArray()
将只解析选中的按钮。这些被称为“成功的控件”,如jQuery documentation.如果您希望使用所有按钮都未选中的Bootstrap按钮组(如您的问题所示),则应考虑 “如果用户从未选中任何按钮会怎样?"。
因此,您应该包含一个默认选中的隐藏按钮,以便按钮组中至少有一个按钮由
.serialize()
或.serializeArray()
解析。