I have 2 radio buttons and each of them inside a label.

<fieldset>
<label><input type="radio" name="invoice_type" value="Receipt"> Receipt</label>
<label><input type="radio" name="invoice_type" value="Invoice"> Invoice</label>
</fieldset>

I tried to change the label text with jQuery with this code but it replaces entire label content, including the radio boxes.

$('fieldset>label:eq(0)').text('Some text');
$('fieldset>label:eq(1)').text('Some text');

how i can replace only the label text without touching the radio boxes?

CodePudding user response：

You should consider rearranging your HTML.

$('fieldset>label:eq(0)').text('Some teqxt');
$('fieldset>label:eq(1)').text('Some text');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
<label for="label1">Receipt</label>
<input type="radio" id="label1" name="invoice_type" value="Receipt">
<label for="label2">Invoice</label>
<input type="radio" id="label2" name="invoice_type" value="Invoice">
</fieldset>

CodePudding user response：

Here is a solution that does not require to change your HTML and uses jquery:

$('fieldset>label:eq(0)').contents()[1].textContent = 'Some teqxt';
$('fieldset>label:eq(0)').contents()[1].textContent = 'Some text';

If you have multiple tags inside the <label> tag you can use the more correct filtering version:

$('fieldset>label:eq(0)').contents().filter(function () { return this.nodeType === 3; })[0].textContent = 'Some teqxt';
$('fieldset>label:eq(0)').contents().filter(function () { return this.nodeType === 3; })[0].textContent = 'Some text';

CodePudding user response：

To make minimal changes to your layout and still not need an id= and related for=:

• add a span to wrap your text and target the span

this also has the added bonus of allowing some styling to be added to the span, eg for consistent spacing

label>input span { margin-left:0.75em; }

without relying on additional spaces in both the original markup and in the replacement text

$("button").click(() => {
  $('fieldset>label:eq(0)>span').text('Some text');
  $('fieldset>label:eq(1)>span').text('Some other text');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset>
  <label>
    <input type="radio" name="invoice_type" value="Receipt">
    <span>Receipt</span>
  </label>
  <label>
    <input type="radio" name="invoice_type" value="Invoice">
    <span>Invoice</span>
  </label>
</fieldset>
<button>click me</button>

---

Note

https://api.jquery.com/eq-selector/#eq1

As of jQuery 3.4, the :eq pseudo-class is deprecated. Remove it from your selectors and filter the results later using .eq().

left it in above so that it matches OPs code more closest, the alternative would be:

$("fieldset>label").eq(0).find(span)

or target the individual label directly

$("input[value='Receipt']").next()

(based on the current layout)

CodePudding user response：

Using simple vanilla JS this is easy (no clue about jQuery though, stopped using that in 2015), and does not require any changes in the markup:

document.querySelector('fieldset>label').childNodes[1].textContent = ' foo';
document.querySelector('fieldset>label label').childNodes[1].textContent = ' bar';

<fieldset>
  <label><input type="radio" name="invoice_type" value="Receipt"> Receipt</label>
  <label><input type="radio" name="invoice_type" value="Invoice"> Invoice</label>
</fieldset>