jQuery Serialize使用Bootstrap单选按钮组间歇性工作

ki0zmccv  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(138)

我尝试在单击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#
谢谢你!

mrphzbgm

mrphzbgm1#

如果您遇到问题,您真的应该阅读所有关于jQuery的.serialize()函数的文档。

来自**.serialize() API**:

注意事项:只有“successful controls”被序列化为字符串。由于表单不是使用按钮提交的,因此没有提交按钮值被序列化。对于要包含在序列化字符串中的表单元素的值,元素必须具有名称属性。复选框和单选按钮中的值(类型为“radio”或“checkbox”的输入)只有在选中时才包括在内。来自文件选择元素的数据不会序列化。

现在从W3关于成功控制的文档中:

对于共享相同name属性值的单选按钮,只有“on”单选按钮可能成功。
所有这些都解释了为什么它会间歇性地工作。因为有时你碰巧遇到了check单选按钮,所以它被认为是"on",你的函数序列化了那个输入按钮。

解决方法如下:

不要使用单选按钮类型的输入,只需使用普通输入并将显示设置为无。

<div id="mode-group" class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input name="mode" id="option1" value="cash/check" style="display: none">Cash / Cheque / Bank Transfer</label>
  <label class="btn btn-primary">
    <input name="mode" id="option2" value="jobsBuddy" style="display: none">JobsBuddy Disbursement</label>
</div>

Bootply Demo

lbsnaicq

lbsnaicq2#

jQuery .serialize().serializeArray()将只解析选中的按钮。这些被称为“成功的控件”,如jQuery documentation.
如果您希望使用所有按钮都未选中的Bootstrap按钮组(如您的问题所示),则应考虑 “如果用户从未选中任何按钮会怎样?"
因此,您应该包含一个默认选中的隐藏按钮,以便按钮组中至少有一个按钮由.serialize().serializeArray()解析。

<form>
  <div class="form-group">

    <!--
      This hidden checked button (with value 'none')
      will ensure that `serialize` parses at least one
      input in the button group.
    -->
    <input class="hidden" type="radio" name="color" value="none" checked>

    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default">
        <input type="radio" name="color" value="blue" />
        <span>Blue</span>
      </label>
      <label class="btn btn-default">
        <input type="radio" name="color" value="green" />
        <span>Green</span>
      </label>
    </div>

  </div>
</form>

相关问题