Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Update HTML H4 tag using jQuery

I am having trouble changing the "text" between an HTML tag using jQuery. When someone clicks on a "radio button", the text should be updated in a certain HTML element. Here is my HTML:

<div class="radio-line" id="radio-manager">
    <input type="radio" id="rad-400" name="radio-manager" value="No"  />
</div>

HTML to be updated on radio check:

<h4 class="manager">Manager</h4>

When someone clicks on the radio above, the "Manager" text should become "Employees". I tried some jQuery code but cannot quite figure it out.

like image 765
three3 Avatar asked Dec 07 '12 20:12

three3


2 Answers

All you need to do is this -

$('input[name="radio-manager"]').change(function() {
    if($('#rad-400').is(':checked')){
        $('h4.manager').text('Employees');
    } else {
        $('h4.manager').text('Manager');
    }
});

See http://jsfiddle.net/Eub9Y/

like image 62
Jay Blanchard Avatar answered Sep 19 '22 11:09

Jay Blanchard


Check out the following fiddle.

http://jsfiddle.net/JBjXN/

<div class="radio-line" id="radio-manager">
    <input type="radio" id="rad-400" name="radio-manager" value="No" data-text="Employees" />
</div>

<h4 class="manager">Manager</h4>

$('.radio-line').on('click', 'input[type="radio"]', changeText);

function changeText(e) {
    $('.manager').text($(e.currentTarget).data('text'));
}​
like image 33
Dennis Martinez Avatar answered Sep 19 '22 11:09

Dennis Martinez