Take data attribute value and apply as text in another html element

Asked

Viewed 2,640 times

2

I have a series of checkboxes in an interface that are already configured to display/hide other elements of the interface conditionally. In this same interface I have a div set to display messages to the user also conditionally depending on the checkbox selected.

I did this example on jsfiddle based on another script, which uses . each in the function to check the inputs with a certain class and "print" the label text of these inputs in another element, in case a <span>

It turns out that in the "final" interface the checkbox and radio elements are customized and use the tag <label> to define their styles, which in turn does not allow me to insert texts into the elements <label> and so I can’t use that function...

There would be another, simpler and more coherent way to display conditional messages perhaps extracted from the attribute data-?

Here is the code mentioned in the jsfiddle link.

jquery html css checkbox attributes

2 answers

4


Yes there is. Look at this jsfiddle.

Just put, as you yourself mentioned, data-<elemento> and use it. Note that in the case, it was used data-text and to iterate on it just use the jquery element $.data() recovering the tag text that is to say, $.data("text").

See HTML code below:

<input type="checkbox" id="money" class="paymethods cash">
<label data-text="cash from data" for="money">In Cash</label>

<input type="checkbox" id="card" class="paymethods ccard">
<label data-text="card from data" for="card">Credit Card</label>

<div class="messages">You have chosen to pay <span class="pay-method" data-cash="In cash" data-card="Credit Card" data-paymix="In cash & Credit Card"></span> for your order upon delivery</div>

Note that in each label was placed a data-text with the value to be displayed in $.foreach() of javascript code.

The following is javascipt code:

$(".paymethods").on("change", function(){
    var paymethods = [];
    $('.paymethods:checked').each(function(){        
        var payTypes = $(this).next().data("text");
        paymethods.push(payTypes);
    });
    $(".pay-method").html(paymethods.join(" & "));
})

Here the solution presented was maintained, however, instead if one recovers the values of each label using $.text(), is used $.data("text").

  • That is not an answer friend, you must present your code and explain why to teach the one who asked the question.

  • The code is there :)

  • now improved :)

  • Thank you, this solves the issue of not being able to use text in the elements <label>, actually wear $.data("text") makes a lot of sense. Now I was wondering if there wouldn’t be an even leaner function to simply "switch" between the different attributes data- of an element and display them in this same element. Please see the tag <span> with the attributes data-defined. In this solution here https://jsfiddle.net/plan/z0n1moyu/ has a very coarse approach to check that checkboxes are marked and then "toggle" the values...

  • 2

    I found the solution that uses the $.foreach() quite elegant. It is simple and solves the problem clearly and quickly :).

  • @Eduardofernandes good answer, +1 . Perhaps semantically it makes more sense to use the .map(). Tip only: https://jsfiddle.net/433df396/2/

Show 1 more comment

2

It’s funny, I usually get data-Attributes in another way. I think there are several ways to do this action. It’s then as an alternative. See how I do:

$("select#teste").change(function(e) {

  //PEGANDO O DATA-ATTRIBUTE
  let data_id = $("select#teste option:selected").attr('data-id');
  //Pegando value
  let val = $("select#teste option:selected").val();
  //Pegando text
  let text = $("select#teste option:selected").text();

  alert("Vindo do data-atributte: " + data_id);
  alert("Vindo do value: " + val);
  alert("Vindo do text: " + text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="teste">
  <option value="Valor_1" data-id="1">Valor Text 1</option>
  <option value="Valor_2" data-id="2">Valor Text 2</option>
  <option value="Valor_3" data-id="3">Valor Text 3</option>
  <option value="Valor_4" data-id="4">Valor Text 4</option>
</select>

Browser other questions tagged jquery html css checkbox attributes

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