Question

我有以下内容：

$('.checkbox').click(function () {
      console.log(this);
      $.ajax({
        type:'POST',
        url: '/loadProducts',
        data: {},
        success: function(response) {
               console.log(response);
               $('.js-products').html(response);
        }});
    return false;
});

现在我在console.log(this)的位置返回：

<div class="ui checkbox checked">
    <input type="checkbox" name="gender[Women]" tabindex="0" class="hidden">
    <label>Women</label>
</div>

如何获取输入名称（性别）？是否签出了复选框？

Answer 1

您可以使用find的{{1}}方法获取输入对象，然后检查是否已选中性别女性，您可以使用jQuery prop方法作为jQuery好。

$('.checkbox').click(function () {
  // to get the input
  var $input = $(this).find('input');
  // to check if the checkbox is checked or not
  console.info($input.prop('checked'));

            $.ajax({
                type:'POST',
                url: '/loadProducts',
                data: {},
                success: function(response) {
                    console.log(response);
                    $('.js-products').html(response);
                }});
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui checkbox checked">
        <input type="checkbox" name="gender[Women]" tabindex="0" class="hidden">
        <label>Women</label>
 </div>

Answer 2

此答案here向您展示如何按名称检索元素。但是，这里棘手的部分是你的名字本身有括号。所以，为了解决这个问题，你需要添加引号＆＃34;围绕名称，如下面的示例所示。

获得元素后，您可以简单地.prop('checked')来检索当前值。

$('.checkbox').click(function () {
            console.log(this);
            var theValue = $('input[name="gender[women]"]').prop('checked'); //<--HERE IS HOW YOU GET THE VALUE
            console.log(theValue);

            $.ajax({
                type:'POST',
                url: '/loadProducts',
                data: {},
                success: function(response) {
                    console.log(response);
                    $('.js-products').html(response);
                }});
            return false;
        });

Answer 3

使用$(this).find(":checkbox")获取复选框。然后，您可以使用.attr('name')来获取名称，然后使用.is(":checked")来查看是否已对其进行检查。

你不应该return false，因为这会阻止点击实际更改框状态的复选框。

$('.checkbox').click(function() {
  console.log(this);
  var checkbox = $(this).find(":checkbox");
  var name = checkbox.attr("name");
  var checked = checkbox.is(":checked");
  console.log(name + "is " + (checked ? "" : "not ") + "checked");
  $.ajax({
    type: 'POST',
    url: '/loadProducts',
    data: {},
    success: function(response) {
      console.log(response);
      $('.js-products').html(response);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui checkbox checked">
  <input type="checkbox" name="gender[Women]" tabindex="0" class="hidden">
  <label>Women</label>
</div>

Answer 4

如果我正确解释了问题，您可以将HTML字符串response传递给jQuery()以从HTML字符串创建jQuery对象，然后调用.attr("name")和.prop("checked") ：

var input = $(response).find("input");
console.log(input.attr("name"), input.prop("checked"));

如何获取输入名称（性别）？以及复选框是否检查出来没有？

如果您尝试获取clicked元素的.name和.checked属性值，可以将.querySelector()链接到this：.checkbox元素，选择器"input[type=checkbox]";以.getAttribute()为参数的"name"，.replace() RegExp /^\w+\[|\]/g来"["，"]"; .checked

返回的匹配元素的.querySelector()属性

   $(".checkbox").click(function () {
      var input = this.querySelector("input[type=checkbox]");
      var _name = input.getAttribute("name").replace(/^\w+\[|\]/g, "");
      var checked = input.checked;
      console.log(_name, checked);
      $.ajax(/* settings */);
   });

单击使用jQuery获取输入值

4 个答案: