From a selected checkbox, take the value of an upcoming date attribute

Asked

Viewed 449 times

1

Good afternoon, i have a checkbox selected (check = true)

<div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3 space">
<div class="input-group">
    <span class="input-group-addon">
        <input type="radio" id="cat5" name="rd_categoriaRamal" value="cat5" checked>
    </span>
    <label class="form-control" for="cat5">Cat. 5</label>
    <span class="input-group-addon"><span id="teste" class="fluigicon fluigicon-info-sign bs-docs-popover-hover" data-toggle="popover" title="" data-content="Ligações locais, celular e DDD." data-original-title="Popover title"><label class="form-control" for="cat5">Cat. 5</label></span></span>
</div>
</div>

and I want to take the value of the data-content that is close to it:

"data-content="Ligações locais, celular e DDD."

I tried with that code here, but unsuccessfully:

var explicacaoCategoriaRamal    =   $('input[name=rd_categoriaRamal]:radio:checked').closest("span .fluigicon").data("content");

Can anyone explain to me why it’s not working? I tried some variations of it without success.

javascript jquery html

  • Try it this way var explicacaoCategoriaRamal = $('input[name=rd_categoriaRamal]:radio:checked').closest("span .fluigicon").attr("data-content");

  • Unfortunately, so does not work. Gives Undefined.

1 answer

2


You have to climb the DOM until .input-group-addon, seek out the sibling .input-group-addon and then look for a descendant with data-content.

It could be so:

$(':checkbox').on('change', function() {
  var data = $(this)
    .closest('.input-group-addon')
    .nextAll('.input-group-addon:first')
    .find('[data-content]')
    .data('content');
  console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3 space">
  <div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox" id="cat5" name="rd_categoriaRamal" value="cat5" checked>
    </span>
    <label class="form-control" for="cat5">Cat. 5</label>
    <span class="input-group-addon"><span id="teste" class="fluigicon fluigicon-info-sign bs-docs-popover-hover" data-toggle="popover" title="" data-content="Ligações locais, celular e DDD." data-original-title="Popover title"><label class="form-control" for="cat5">Cat. 5</label></span></span>
  </div>
</div>

  • I understood that he wanted to take the value within the attribute data-content, No? With that, I suggest the function .attr('data-content') of jQuery http://api.jquery.com/attr/

  • 1

    @leonardopessoa Usar .data('content') will take the attribute [data-content], as you can see here: https://api.jquery.com/data/.

  • 1

    @leonardopessoa as AP wrote pegar o valor de um atributo I found this the best solution. I do not know .attr will be the best solution because the way jQuery reads fields data-

  • 1

    Understood. Thank you for the clarification!

  • 1

    Excellent answer, it worked here. I tried to do something similar to Children without success. Vlw by the answer.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.