CODEWITHSUNDEEP
jqueryhtmlcss
VladJ
VladJ

Reputation: 117

How can I change the text of a label when a button is checked?

I am willing to change the text displayed by my heading only if a radio button is checked.I am using input type="radio" so I can style it using CSS. This is what my code looks like:

<h1>What is your favourite class?</h1>

<div>
  <input type="radio" name="radio" id="radio1" class="radio" />
  <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label>
</div>

Upvotes: 2

Views: 1768

Answers (7)

Shubham Khatri
Shubham Khatri

Reputation: 281874

You can try this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $('input[type=radio]').change(function() {
           $('h1').text('Enter you new text');
        });
    });

</script>

.change detects the change in state of radio button.

DEMO

Upvotes: 1

Chris Karma Horton
Chris Karma Horton

Reputation: 1

I think you only need a bit of js.

document.getElementById("radio").innerHTML = "Change text to this";

OR

Maybe you can try an if statement,

var radio;

if //radio button is clicked (.onclick = true) //sorry i dont know the proper code for this action/statement...not sure if this is possible. just working thru a thought process {

document.getElementById("radio").innerHTML = "Change text to this";

}

<h1>What is your favourite class?</h1>

<div>
  <input type="radio" name="radio" id="radio1" class="radio" />
  <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label>
</div>

Upvotes: 0

jrob
jrob

Reputation: 1

First check if the radio button is selected. If it is, change the innerHTML property of the label element.

if (document.getElementById('radio1').checked) document.getElementById('1').innerHTML = "Text to insert";

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

Use the onchange attribute for the checkbox and call the change function, which will change the text of the heading.

You only need JavaScript, no jQuery for this solution.

If you do not want to use the HTML onchange attribute, you can use an eventListener in your JavaScript.

function change() {
  document.getElementsByTagName("h1")[0].textContent="Changed";
}
<h1>What is your favourite class?</h1>

<div>
  <input type="radio" name="radio" id="radio1" class="radio" onchange="change()"/>
  <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label>
</div>

Upvotes: 0

nathan felix
nathan felix

Reputation: 396

You need to use a .change to detect when someone clicks the radio button.

$('input[type=radio][name=radio]').change(function() {
  $(".header").text("New text");
});

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

A possible solution is:

// on document ready
$(function () {
  // when the radio changes
  $(':radio.radio').on('change', function(e) {
    // set text of h1 element
    $('h1').text('mmmmm');
  });
});
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>


<h1>What is your favourite class?</h1>

<div>
    <input type="radio" name="radio" id="radio1" class="radio"/>
    <label for="radio1" style="color:black;font-family:impact;text-align:center;" id='1'>Maths</label>
</div>

Upvotes: 1

user5613057
user5613057

Reputation:

Add an ID to your Label and use Javascript to change the innerHTML of this label:

getElementById("label").innerHTML = "new Text here"

Upvotes: 1

Related Questions