CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Pedro
Pedro

Reputation: 1477

Get attribute value with jQuery

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>

Upvotes: 0

Views: 21638

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

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>

Upvotes: 2

Saumya Rastogi
Saumya Rastogi

Reputation: 13693

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!

Upvotes: 0

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

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!

Upvotes: 1

user3337667
user3337667

Reputation: 161

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

Upvotes: 0

Related Questions