1

我有以下 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>

当我取消选中所有复选框时，带有类 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);
    } 
 });
4

4 回答 4

2

jQuery 并非一直都存在于 DOM 上。每次要替换时，您都必须明确查找元素。所以不要使用变量ActiveText& InactiveText，而是使用$(".cancel-all").replaceWith(CitySearch)and$(".city-search-text").replaceWith(CancelAll)

于 2013-07-27T10:33:28.743 回答
1

您不应该一直替换您的内容。只需在需要时显示和隐藏您的元素：

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

小提琴

于 2013-07-27T10:37:48.017 回答
0

尝试这个：

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/

于 2013-07-27T10:34:13.000 回答
0

而不是替换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();
    }
});
于 2013-07-27T10:36:42.040 回答