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>

当我取消选中所有复选框时，链接类取消 - 全部应替换为带有城市搜索文本的范围。

我有这个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＆amp; 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();
        } 
     });
});

<强> Fiddle

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/

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

如果在jquery中选中任何复选框，则显示不同的元素

4 个答案: