From a selected checkbox, get the value of a date attribute next

Navigation
1

Good afternoon, I have a checked checkbox (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 get the value of the data-content that is close to it: 

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

I tried with this code here, but with no success: 

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

Can anyone explain why it's not working? I've tried some variations on this without success.

    
asked by anonymous 22.03.2017 / 18:56

1 answer

2

You have to go up the DOM to .input-group-addon , look for sibling .input-group-addon and then look for a descendant with data-content .

It could look like this: 

$(':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><divclass="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>
    
22.03.2017 / 19:06
Transforming clicks into JS function ASP NET MVC with JQuery