Change heading on the change of radio button status

Question

How can I make the heading and label text of radio buttons change when a button is checked? This is how my code looks like, but when I press a button nothing happens. Although I think this code is correct:

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

</script>
<h1 style='color:black;font-family:"Courier New", monospace;margin-left:-10px;' id='h1'>#1.Question 1</h1>
<div>

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

                <div>   
                        <input type="radio" name="radio" id="radio3" class="radio"/>
                        <label for="radio3" style="color:black;font-family:impact;text-align:center;" id='3'>Answer 2</label>
                </div>

                <div>   
                        <input type="radio" name="radio" id="radio4" class="radio"/>
                        <label for="radio4" style="color:black;font-family:impact;text-align:center;" id='4'>Answer 3</label>
                </div>

Forgot to add the script part. Thank you for pointing this out. I am still at the start of my Stackoverflow experience :D — VladJ, Apr 11 '16 at 06:35
Your JavaScript code has no problem, but the HTML does. Please add values to radio buttons that you have: For example: — Than Ngo Hoai, Apr 11 '16 at 06:56
Did this and it doesn't work. I really want to solve this issue because I don't get what's wrong — VladJ, Apr 11 '16 at 07:06
Might be because of this? http://imgur.com/HJw6Ul1 I added some CSS so it so it's green when I press it and it moves when I hover. — VladJ, Apr 11 '16 at 07:10

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

Make sure to point to the correct jquery: https://code.jquery.com/jquery-1.12.1.min.js (There's even a 1.12.3 already available).

Insert your script tag into the head of the document

<head>
    <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.1.min.js">
</head>

Otherwise insert the script tag below your Html at the end of the body

<body>
    <h1>Your H1</h1>
    <div>Your Div with your Inputs</div>
    <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.1.min.js">
</body>

For the difference of the two approaches look here: $(document).ready(function(){}); vs script at the bottom of page

Check this jsFiddle where everything works as expected (nothing of your code changed): https://jsfiddle.net/fj8ajpaw/

edited May 23 '17 at 11:45

Community

1
1

answered Apr 11 '16 at 06:57

Fidel90

1,828
6
27
63

I don't have an actual radio button. I have this imgur.com/HJw6Ul1 But I can still select it so it shouldn't be a problem, right? – VladJ Apr 11 '16 at 07:16
Well...it depends :) If the underlying HTML is still a radio button input then that would work ofcourse. Otherwise, if that are just buttons you may try to work with an "click" event handler. – Fidel90 Apr 11 '16 at 07:18
It's still a checkbox because it stays selected after I press it. But I can't see what the problem is. I also tried using click. It works if I try to change the text using a button. And when I press that button, the question and label change. – VladJ Apr 11 '16 at 07:21
Did you already tried changing the location of your script tag? – Fidel90 Apr 11 '16 at 07:24
Well, you may write it in a *.js file and include it with another script tag. Otherwise just add the script tags at the end of your html body and write your javascript there. Look here for an example: https://jsfiddle.net/fj8ajpaw/1/ If you have much javascript I'd prefer to use external files. You would then add another `` into your ``. – Fidel90 Apr 11 '16 at 07:28
You save my life dude. Thank you so much. This seemed to be the problem. I added it to the bottom of my body and it is perfect NOW. How can I reward you on this site? I am new. I checked the Nike-like green sign. – VladJ Apr 11 '16 at 07:32
Glad I could help you :) Anyway I would advise you to take a look at how to include javascript into your HTML here http://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file and here http://javascript.info/tutorial/adding-script-html Good luck :) – Fidel90 Apr 11 '16 at 07:36
How can I also change the label text because if I try with $('#1').innerHTML("My text"); nothing happens – VladJ Apr 11 '16 at 07:41
I need to change all labels after this. After clicking one, all of the should change. – VladJ Apr 11 '16 at 07:44
Is there any way a I can deselect the selected radio button with code? – VladJ Apr 11 '16 at 07:57
You can do that but it's better to open a new question for this. Before you may read here http://stackoverflow.com/questions/2117538/how-to-uncheck-a-radio-button or here http://stackoverflow.com/questions/17120576/how-to-uncheck-checked-radio-button – Fidel90 Apr 11 '16 at 08:01

score 0 · Answer 2 · answered Apr 11 '16 at 07:06

Try something like this:

$(':radio.radio').each(function(){
$(this).change(function(){
if($(this).attr('id') == 'radio2'){
$(this).siblings('label').text('Answer 1 selected');
$('h1').text('Answer 1 is selected');
} else if ($(this).attr('id') == 'radio3'){
$(this).siblings('label').text('Answer 2 selected');
$('h1').text('Answer 2 is selected');
} else if ($(this).attr('id') == 'radio4') {
$(this).siblings('label').text('Answer 3 selected');
$('h1').text('Answer 3 is selected');
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style='color:black;font-family:"Courier New", monospace;margin-left:-10px;' id='h1'>#1.Question 1</h1>
<div>

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

                <div>   
                        <input type="radio" name="radio" id="radio3" class="radio"/>
                        <label for="radio3" style="color:black;font-family:impact;text-align:center;" id='3'>Answer 2</label>
                </div>

                <div>   
                        <input type="radio" name="radio" id="radio4" class="radio"/>
                        <label for="radio4" style="color:black;font-family:impact;text-align:center;" id='4'>Answer 3</label>
                </div>

I don't have an actual radio button. I have this imgur.com/HJw6Ul1 But I can still select it so it shouldn't be a problem, right? — VladJ, Apr 11 '16 at 07:16
are you sure you loaded `jquery` library in your page? it's working here probably problem is on your page. any console error? @VladJ — Pedram, Apr 11 '16 at 07:29
Solved it now. I added the script tag at the bottom of the page. All working neat. Thank you ! — VladJ, Apr 11 '16 at 07:42

Change heading on the change of radio button status

2 Answers2