javascript - 如果在 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 的跨度替换为:

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

当我取消选中所有复选框时，带有 cancel-all 类的链接应替换为带有 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)