Show different ellements if any checkbox is checked in jquery

Question

I have the following HTML structure:

<div>
    <span class="city-search-text">Choose City</span>
</div>
<div class="multiselect">
    <label><input type="checkbox" name="option[]" value="1" />1</label>
    <label><input type="checkbox" name="option[]" value="2" />2</label>
    <label><input type="checkbox" name="option[]" value="3" />3</label>
    <label><input type="checkbox" name="option[]" value="4" />4</label>
</div>

If any checkbox is selected, span with class city-search-text should be replace with:

<a class="cancel-all" href="#">Cancel all</a>

When i uncheck all check boxes, link with class cancel-all should be replaced with span with class city-search-text.

I have this jquery code. It replaces the span when i check some box, but doesn't replace it back when i uncheck all checkboxes.

var Checkboxes = $('.multiselect').find(':checkbox');
var CitySearch = '<span class="city-search-text">Choose City</span>';
var InactiveText = $('.city-search-text');
var CancellAll = '<a class="cancel-all" href="#">Cancell All</a>';
var ActiveText = $('.cancel-all');

Checkboxes.click(function(){
    if(Checkboxes.is(':checked')){
        InactiveText.replaceWith(CancellAll);
    }
    else{
        ActiveText.replaceWith(CitySearch);
    } 
 });

Answer 1

jQuery is not live on the DOM all the time. You'll have to explicitly look for the element each time you want to replace. So do not use the variables ActiveText & InactiveText , instead use $(".cancel-all").replaceWith(CitySearch) and $(".city-search-text").replaceWith(CancelAll)

Answer 2

You shouldn't replace your content all the time. Just show and hide your elements when needed:

$(function(){    
    var Checkboxes = $('.multiselect input[type=checkbox]');
    var CitySearch = $('.city-search-text');
    var CancelAll = $('.cancel-all');

    CitySearch.show();
    CancelAll.hide();


    Checkboxes.click(function(){
        if(Checkboxes.is(':checked')){
            CitySearch.hide();
            CancelAll.show();
        }
        else{
            CitySearch.show();
            CancelAll.hide();
        } 
     });
});

Fiddle

Answer 3

Try this:

JavaScript:

var checkbox = $('.multiselect').find(':checkbox');
var choose = $('.city-search-text');
var cancel = $('.cancel-all');

checkbox.click(function(){
    if(checkbox.is(':checked')){
        cancel.show();
        choose.hide();
    }
    else {
        cancel.hide();
        choose.show();
    } 
});

HTML:

<div>
    <span class="city-search-text">Choose City</span>
    <a class="cancel-all" href="#">Cancel all</a>
</div>
<div class="multiselect">
    <label><input type="checkbox" name="option[]" value="1" />1</label>
    <label><input type="checkbox" name="option[]" value="2" />2</label>
    <label><input type="checkbox" name="option[]" value="3" />3</label>
    <label><input type="checkbox" name="option[]" value="4" />4</label>
</div>

Fiddle: http://jsfiddle.net/aSa3T/

Answer 4

Instead of replacing the html. You can show and hide the options you want.

html

    <div>
        <span class="city-search-text">Choose City</span>
        <a style="display:none" class="cancel-all" href="#">Cancell All</a>
    </div>
    <div class="multiselect">
        <label><input type="checkbox" name="option[]" value="1" />1</label>
        <label><input type="checkbox" name="option[]" value="2" />2</label>
        <label><input type="checkbox" name="option[]" value="3" />3</label>
        <label><input type="checkbox" name="option[]" value="4" />4</label>
    </div>

js

$(".multiselect :checkbox").click(function()
{
    if($(".multiselect :checked").length > 0)
    {
        $(".city-search-text").hide();
        $(".cancel-all").show();
    }
    else
    {
        $(".city-search-text").show();
        $(".cancel-all").hide();
    }
});