JQuery div 的多个子级别输入元素的选择器

Question

我正在尝试 select 特定 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

您正在使用：

$('.ajax-form :input')

这将获取选中的复选框的值。

检查更新JSFiddle Link

在此我将 checked 属性放在一个复选框中，您将在 jquery 代码中获得它的值。因此，要获得复选框值，您还必须处理选中/未选中事件。

Answer 2

您的代码不起作用，因为当您加载表单时，您的复选框未选中，因此不考虑表单值

当你在加载页面时获取数据时尝试下面的代码


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

Answer 3

您的代码无法运行的原因：-

1.In 您的代码在文档准备就绪时没有选中复选框，这就是序列化数据中没有值的原因。

解决方案:- 将 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.Create 一个按钮并在按钮上单击尝试序列化 div 元素 data.Then 无需添加 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">

JQuery div 的多个子级别输入元素的选择器

JQuery selector for multiple sub level inputs elements of a div

javascript

jquery

jquery-selectors