javascript - 用于 div 的多个子级别输入元素的 JQuery 选择器

Question

我正在尝试选择特定 div 中的所有输入。 div 的子深度为 1 和 2。我能够获取第一级的输入，但不能获取第二级的输入。这是我的代码:-

HTML

<div class="col-xs-11 ajax-form">
  <input type="hidden" name="user_id" value="4">
  <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo"> Sudo</label>
  <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin"> Admin</label>
  <label class="checkbox-inline"><input name="3" type="checkbox" value="Client"> Client</label>
</div>

JS:

$(document).ready(function() {
  var data = $('.ajax-form :input').serialize();
  console.log(data);
});

我的输出:

user_id=4

这是我的 jsfiddle

感谢您提供的所有帮助。

Answer 1

代码不起作用的原因:-

1.在您的代码中，当文档准备好时，不会选中任何复选框，这就是为什么值不会出现在序列化数据中。

解决方案:- 将 checked 属性添加到复选框，如下所示:-

示例:-

$(document).ready(function() {
  var data = $('.ajax-form :input').serialize();
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-11 ajax-form">
  <input type="hidden" name="user_id" value="4">
  <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo" checked> Sudo</label>
  <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin" checked> Admin</label>
  <label class="checkbox-inline"><input name="3" type="checkbox" value="Client" checked> Client</label>
</div>

执行相同操作的另一个选项:-

2.创建一个按钮，然后单击按钮尝试序列化 div 元素数据。然后不需要添加 checked 属性。它将动态地工作。

示例:-

$(document).ready(function() {
  $('#serialize_div_data').click(function(){
      var data = $('.ajax-form :input').serialize();
      console.log(data);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-xs-11 ajax-form">
      <input type="hidden" name="user_id" value="4">
      <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo"> Sudo</label>
      <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin"> Admin</label>
      <label class="checkbox-inline"><input name="3" type="checkbox" value="Client"> Client</label>
</div>
<input type="button" id = "serialize_div_data" value="Click Me to serailized the div data">