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=".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" autoplete="off" d="security_alert">Security
  </label>
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="strike">Strike
  </label>
  <label class="btn btn-info active">
    <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="dontknow">I DON'T
  </label>
</div>

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./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" autoplete="off" d="security_alert">Security
  </label>
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="strike">Strike
  </label>
  <label class="btn btn-info active">
    <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="dontknow">I DON'T
  </label>
</div>

• javascript
• jquery
• jquery-selectors

• 2 You don't have any <input> tag that has <element class="active"><input> inside... – Dekel Commented Dec 16, 2016 at 15:33
• 2 .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 Commented Dec 16, 2016 at 15:34

4 Answers 4

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./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" autoplete="off" d="security_alert"> Security
  </label>
  <label class="btn btn-info ">
    <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="strike"> Strike
  </label>
  <label class="btn btn-info active">
    <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="dontknow"> I DON'T
  </label>
</div>

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" autoplete="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!

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

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./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" autoplete="off" d="security_alert"> Security
  </label>
  <label class="btn btn-info ">
  <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="strike"> Strike
  </label>
  <label class="btn btn-info active">
  <input type="radio" name="options" id="optiond1" class="btncauses" autoplete="off" d="dontknow"> I DON'T
  </label>
</div>

Hope this helps!