Question

我在页面加载时设置了以下代码

<div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-default active" for="hrb">
                                            <input type="radio" id="hrb" name="period" value="hourly" /> Hourly
                                        </label> 
                                        <label class="btn btn-default" for="drb">
                                            <input type="radio" id="drb" name="period" value="daily" /> Daily
                                        </label> 
                                        <label class="btn btn-default" for="wrb">
                                            <input type="radio" id="wrb" name="period" value="weekly" /> Weekly
                                        </label> 
                                        <label class="btn btn-default" for="mrb">
                                            <input type="radio" id="mrb" name="period" value="monthly" /> Monthly
                                        </label> 
                                    </div>

如果我使用jquery serialize来获取所选值，则不返回任何内容

$(document).ready(function () {
    var input = $(".btn-group").find('input');
    console.log(input);

    var data = input.serialize() ; //$( "form" ).serialize();
    console.log(data);
});

我设法做了以下事情，除非有人有更好的方法吗？

var group_period = 'period=';
            $('#group_period .active').each(function(){
                group_period += $(this).attr('data-value'); 
            }); 
    var requiredrole = "requiredrole=" + $("requiredrole").val();

    var data = requiredrole + "&" + group_period + "&" + $( "form" ).serialize();

Answer 1

您的示例无法正常工作，因为您在页面加载时没有活动元素，使用checked="checked"设置默认选定元素以便脚本正常工作

$(document).ready(function() {
  var input = $(".btn-group input");
  var data = $('input').serialize(); //$( "form" ).serialize();
  $('#result').html(data);
  
  $('.go').click(function(e){
    e.preventDefault();
    var data = $('input').serialize(); //$( "form" ).serialize();
    $('#result').html(data);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default active" for="hrb">
    <input type="radio" checked="checked" id="hrb" name="period" value="hourly" /> Hourly
  </label>
  <label class="btn btn-default" for="drb">
    <input type="radio" id="drb" name="period" value="daily" /> Daily
  </label>
  <label class="btn btn-default" for="wrb">
    <input type="radio" id="wrb" name="period" value="weekly" /> Weekly
  </label>
  <label class="btn btn-default" for="mrb">
    <input type="radio" id="mrb" name="period" value="monthly" /> Monthly
  </label>
  <button class="go">
  SERIALIZE
  </button>
</div>
<div id="result">
</div>

Answer 2

使用名称字段值作为句点[]而不是句点。

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active" for="hrb">
        <input type="radio" id="hrb" name="period[]" value="hourly" /> Hourly
    </label> 
    <label class="btn btn-default" for="drb">
        <input type="radio" id="drb" name="period[]" value="daily" /> Daily
    </label> 
    <label class="btn btn-default" for="wrb">
        <input type="radio" id="wrb" name="period[]" value="weekly" /> Weekly
    </label> 
    <label class="btn btn-default" for="mrb">
        <input type="radio" id="mrb" name="period[]" value="monthly" /> Monthly
    </label> 
</div>

Answer 3

您的脚本似乎正在运行，除非您尝试在表单更新时尝试接收序列化值，即使input.serialize()仅在开始时被触发一次？

尝试绑定：

var data = input.serialize() ; //$( "form" ).serialize();
console.log(data);

直接绑定到按钮元素的.change()或.click()之类的事件。 .change()， .click()

作为参考，我尝试使用手动更新程序代码：

$('.btn_test').click(function(){
    var data = input.serialize() ; //$( "form" ).serialize();
    console.log(data);
});

并将其直接放在按钮组下方：

<button class="btn_test">Click</button

显然这不是你想要的，但证明你的输入序列化工作得很好。（单击period=weekly）

时，控制台日志中的输出为btn_test

编辑：该死的，@ Vanojx1打败了我。

jquery序列化没有选择活动引导按钮

3 个答案: