javascript - jquery 序列化不拾取事件 Bootstrap 按钮

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序列化来获取选定的值，它不会返回任何内容

$(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>