-3

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?

Improve this question
2
  • 1
    Are you trying to get .name and .checked of clicked element or .name and .checked of response? Commented Mar 29, 2017 at 20:54
  • 1
    @ssube Does the duplicate question address how to find the checkbox inside the DIV that was clicked? Commented Mar 29, 2017 at 21:12

4 Answers 4

Reset to default
1

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; });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Good additional info on the bracketed attribute value
1

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>

Improve this answer

2 Comments

@downvoter mind to explain?
care to explain?
-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>

Improve this answer

3 Comments

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

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

1 Comment

@PeterMortensen What is issue with original post? What is the definition of "Active reading"?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.