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属性添加到复选框，如下所示： -

实施例： -

＆＃13;

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

＆＃13;

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

＆＃13;

执行此操作的另一个选项： -

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

实施例： -

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您正在使用：

$('.ajax-form :input')

这将获得检查的那些复选框的值。

检查更新JSFiddle Link

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

Answer 3

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

在加载页面

时获取数据时尝试下面的代码


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

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

3 个答案: