On click get input value using jQuery [duplicate]

Answer 1

Use $(this).find(":checkbox") to get the checkbox. Then you can use .attr('name') to get the name, and .is(":checked") to get whether it's checked.

You shouldn't return false because that prevents clicking on the checkbox from actually changing the box's state.

$('.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 2

You can use the method find of jQuery to get the input object, then to check if the gender woman is checked you can use prop method of jQuery as well.

$('.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 3

If I interpret the question correctly, you can pass an HTML string response to jQuery() to create a jQuery object from the HTML string, then call .attr("name") and .prop("checked"):

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

---

How do I get the input name (gender)? And whether the checkbox is checked out not?

If you are trying to get the .name and .checked property values of clicked element you can call .querySelector() chained to this: .checkbox element, with selector "input[type=checkbox]"; .getAttribute() with "name" as parameter, .replace() with RegExp /^\w+\[|\]/g to get word within "[", "]"; and .checked property of the matched element returned by .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 */);
   });

Answer 4

This answer here show you how to retrieve the element by name. However, the tricky part here is that your have brackets within the name itself. So, to get around this, you need to add quotes " around the name like in the following example below.

Once you have the element, you can simple do .prop('checked') to retrieve the current value.

$('.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;
        });