Get attribute value with jQuery

Question

I'm trying to get the attribute value in jQuery, but isn't working, My code reports undefined. Here is an example:

console.log($(".btn-causas input").find(".active input").attr('d'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert">Security
  </label>
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike">Strike
  </label>
  <label class="btn btn-info active">
    <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow">I DON'T
  </label>
</div>

You don't have any <input> tag that has <element class="active"><input> inside... — Dekel
– Dekel, Commented Dec 16, 2016 at 15:33
.find() looks for decendants of the element you specify. So by doing $(input).find('.active') you're looking for .active elements inside input. Because this doesn't exist, you'll get an undefined. — Tyler Roper
– Tyler Roper, Commented Dec 16, 2016 at 15:34

Zakaria Acharki · Accepted Answer · 2016-12-19 09:22:21Z

2

The selector could be simply done like :

$(".btn-causas .active input").attr('d');

Hope this helps.

console.log( $(".btn-causas .active input").attr('d') );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
  </label>
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
  </label>
  <label class="btn btn-info active">
    <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
  </label>
</div>

edited Dec 19, 2016 at 9:22

answered Dec 16, 2016 at 15:37

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Radames E. Hernandez · Accepted Answer · 2016-12-16 15:40:42Z

1

The best way to do that is that you rename the attribute d for data-name and you can get very easy that value with this code:

Html:

<input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" data-name="dontknow">

Jquery:

var value = $('input[name="options"]:checked').data('name');
alert(value);

This is the best way to do that, this code retrieve the value of a checked input radio with the attribute data-name

Regards!

answered Dec 16, 2016 at 15:40

Radames E. Hernandez

4,45531 silver badges38 bronze badges

Comments

user3337667 · Accepted Answer · 2016-12-16 15:38:05Z

0

You don't have active class but as per my understanding you are trying to get selected radio buttons' attribute so try :checked on input

answered Dec 16, 2016 at 15:38

user3337667

1611 silver badge10 bronze badges

Comments

Saumya Rastogi · Accepted Answer · 2016-12-16 15:45:50Z

You're specifying wrong selector .btn-causas input, instead use this .btn-causas, See the code below:

Make jQuery find the inputs inside div - .btn-causas instead of finding it inside inputs, as you've done. Inputs doesn't contains a child elements, so you can't find elements inside it.

$(function() {
	console.log($(".btn-causas").find(".active input").attr('d'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-causas" data-toggle="buttons">
  <label class="btn btn-info ">
  <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="security_alert"> Security
  </label>
  <label class="btn btn-info ">
  <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="strike"> Strike
  </label>
  <label class="btn btn-info active">
  <input type="radio" name="options" id="optiond1" class="btncauses" autocomplete="off" d="dontknow"> I DON'T
  </label>
</div>

Hope this helps!

Collectives™ on Stack Overflow

Get attribute value with jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related