Question

This is my first question here on Stack Overflow. I generally find all my answers from searching but I’m completely out of motivation after writing the following code.

Is there a more efficient way or short-hand to write the following code?

Currently it does exactly what I want. When you click a radio button a div is loaded next to that radio button. If you switch the radio button it removes the div and creates a new one next to that radio button.

I’m fairly new to actually writing my own JavaScript/jQuery. I know about CASE but I’m not entirely sure if this is a good situation for that.

Any suggestions would be greatly appreciated.

 jQuery(document).ready(function($) {

var checkedItem = true;

$('form input').click(function(){

    if (checkedItem == true){
        $(this).siblings('div.next').remove('.checked');
        $(this).after('<div class="next">NEXT</div>');
        $(this).siblings('div.next').addClass('checked');

        checkedItem = false;

    }
    else {
        $(this).siblings('div.next').remove('.checked');
        $(this).after('<div class="next">NEXT</div>');
        $(this).siblings('div.next').addClass('checked');

        checkedItem = true;     
    }

});

 });


    <form id="input-form">
<input class="PAD" type="radio" name="Seasons" value="Spring-Fall" /> Spring-Fall<br />
<input class="PAD" type="radio" name="Seasons" value="Winter" /> Winter
</form> 

Answer 1

If you’re on jQuery 1.7+ you can:

HTML

<form id="input-form">
    <input class="PAD" type="radio" name="Seasons" value="Spring-Fall" /> 
    Spring-Fall<br />
    <input class="PAD" type="radio" name="Seasons" value="Winter" /> Winter
</form>

jQuery

$(function() {
    $("input[type=radio]").click(function() {
        if ($(this).is(":checked")) {
            $(this).siblings('.next').remove('.checked');
            $(this).after('<div class="next">NEXT</div>');
            $(this).siblings('.next').addClass('checked');
        }
        else { // fyi, this, or your var is kinda useless redundancy, but just for purpose of show, here ya go
            $(this).siblings('.next').remove('.checked');
            $(this).after('<div class="next">NEXT</div>');
            $(this).siblings('.next').addClass('checked');
        };
    });
});

Although you could easily simplify the whole thing with:

$(function() {
    $("input[type=radio]").click(function() {
        $(this).siblings('.next').remove();
        $(this).after($("<div />").addClass("next checked").text("NEXT"));
    });
});