On click get input value using jQuery

Question

I have the following:

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

Now where I do the console.log(this), it returns:

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

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

Are you trying to get `.name` and `.checked` of clicked element or `.name` and `.checked` of `response`? — guest271314, Mar 29 '17 at 20:54
@ssube Does the duplicate question address how to find the checkbox inside the DIV that was clicked? — Barmar, Mar 29 '17 at 21:12

score 1 · Answer 1 · edited Mar 29 '17 at 22:11

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>

score 1 · Answer 2 · edited May 23 '17 at 12:02

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;
        });

Good additional info on the bracketed attribute value – Mark Schultheiss Mar 29 '17 at 22:14 — Mark Schultheiss, Mar 29 '17 at 22:14

score -1 · Answer 3 · answered Mar 29 '17 at 20:52

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>

As a user with 300K+ reputation, you should know better than to answer extremely low-quality Q's that are gonna get closed anyways. You're just helping to spread low quality content, yourself. Stop. — ndugger, Mar 29 '17 at 21:06
@ndugger Seemed like a reasonable question to me. It's not a duplicate of how to get a checkbox value, because his question is also about finding the checkbox inside the DIV. — Barmar, Mar 29 '17 at 21:11
Fortunately we can now list multiple dupes when we dupe close. Surely someone has asked how to find an element inside another at this point. — Kevin B, Mar 30 '17 at 14:54

score -9 · Answer 4 · edited Apr 04 '17 at 05:10

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 */);
   });

@PeterMortensen What is issue with original post? What is the definition of "Active reading"? — guest271314, Apr 04 '17 at 05:32

On click get input value using jQuery

4 Answers4

Linked