如果在jquery中選中任何復選框，則顯示不同的元素

Question

我有以下HTML結構：

<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>

如果選中任何復選框，則應將替換為類city-search-text的span替換為：

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

當我取消選中所有復選框時，鏈接類取消 - 全部應替換為帶有類city-search-text的span。

我有這個jquery代碼。 當我選中某個框時，它會替換范圍，但是當我取消選中所有復選框時，它不會替換它。

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並不是一直存在於DOM上。 每次要替換時，都必須明確查找元素。 所以不要使用變量ActiveText和InactiveText ，而是使用$(".cancel-all").replaceWith(CitySearch)和$(".city-search-text").replaceWith(CancelAll)

Answer 2

您不應該一直替換您的內容。 只需在需要時顯示和隱藏您的元素：

$(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();
        } 
     });
});

小提琴

Answer 3

嘗試這個：

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>

小提琴： http://jsfiddle.net/aSa3T/ ： http://jsfiddle.net/aSa3T/

Answer 4

而不是替換HTML。 您可以顯示和隱藏所需的選項。

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();
    }
});