如何使用 ICheck.js 清除 div 的内容？答案

【问题标题】：How to clear content of div using ICheck.js?如何使用 ICheck.js 清除 div 的内容？
【发布时间】：2016-02-29 23:58:09
【问题描述】：

我想在取消选中复选框后清除 div 的内容。此外，当复选框被选中时，内容应该是可见的。

我试过了，但是取消勾选后它不会清除内容。它只是在检查时添加更多内容..

这是我的 ajax 代码。

$('.myCheck').on('ifChecked', function (event) {
    if ($(this).is(":checked")) {
    $.ajax({
        url: '/Home/getCategoryItems',
        type: "GET",
        cache: false,
        data: {
            name: $(this).attr("name")
        },
        success: function (data) {

            $("#displayCarsSection").append(data);
        }
    });

    } else {
        $("#displayCarsSection").html('');
    }
});

【问题讨论】：

该代码应该可以工作。向我们展示一个 jsFiddle 来解决您的问题。或者一些html。另外，您应该只使用empty() 而不是html('')。
根据文档，ifChecked 仅在选中复选框时触发。你试过 ifUnchecked 事件吗？
@EricGuan 我也试过 empty() 没有结果。我想向您展示 jsFiddle，但我需要一些时间。稍后我会在 jsFiddle 上发布。
@Chitrang 不，我没有使用 ifUnchecked 事件。你能指导我吗？谢谢！
添加了答案。请注意，如果选中复选框，则会触发 ifChecked，因此您无需在事件处理程序中再次检查

标签： javascript jquery ajax icheck

【解决方案1】：

由于您想在未选中时清除复选框特定数据，因此可以将其存储在对象中。因此，无论何时选中或取消选中复选框，您都可以清除 div 并使用该对象生成新数据以附加到 div。

var checkBoxData = {};    

$('.myCheck').on('ifChecked', function (event) {
    var checkBoxIndex = $(this).index();
    // This callback is triggered when checkbox is checked
    $.ajax({
        url: '/Home/getCategoryItems',
        type: "GET",
        cache: false,
        data: {
            name: $(this).attr("name")
        },
        success: function (data) {
            checkBoxData[checkBoxIndex] = data;
            updateCarsSection();  
        }
    });
});

$('.myCheck').on('ifUnchecked', function (event) {
    // This callback is triggered when checkbox is unchecked
    checkBoxData[$(this).index()] = ""; 
    updateCarsSection();       
}

function updateCarsSection()
{
    // Clear out the div
    $("#displayCarsSection").empty();
    var updatedData = "";
    $.each(checkBoxData, function (key, value) {            
        updatedData += value;
    });
    // Append data based on currently selected checkboxes
    $("#displayCarsSection").append(updatedData);
}

【讨论】：

谢谢！检查时不会添加更多内容。那太棒了。但是当我选中第一个复选框和第二个复选框，然后取消选中其中一个复选框时，它只会清除所有内容。
当我尝试取消选中复选框时，内容仍然存在。它不会被删除。如果我选中另一个复选框，它不会将内容添加在一起.. 谢谢。
这是我的错。this 指的是成功处理程序中用于 ajax 调用的不同对象。编辑了答案。
啊，谢谢。但是当我选中另一个复选框时，它不会将内容添加在一起..
没关系！我让它工作。 :) 我只是使用“ifChanged”而不是“IfChecked”

【解决方案2】：

为什么不使用更改监听器？据我所知，“点击”也应该有效。

见https://jsfiddle.net/kkryao5g/1/

JavaScript

$('.myCheck').on('change', function (event) {
    if ($(this).is(":checked")) {
      $("#displayCarsSection").append($(this).attr('id'));
    } else {
        $("#displayCarsSection").html('');
    }
});

HTML

<input type="checkbox" class="myCheck" id="myCheck1"> <label for="myCheck1">Option 1</label>
<input type="checkbox" class="myCheck" id="myCheck2"> <label for="myCheck2">Option 2</label>
<input type="checkbox" class="myCheck" id="myCheck3"> <label for="myCheck3">Option 3</label>
<br><br>
<span id="displayCarsSection"></span>

【讨论】：

啊，好吧，不知道 iCheck。
否则它必须是使用 ICheck.js 执行此操作的一种方法。顺便说一句，我可以很好地使用本机/默认复选框。

【解决方案3】：

你只有一个小错误，你应该使用ifChanged回调而不是ifChecked。

$('.myCheck').on('ifChanged', function (event) {
    if ($(this).is(":checked")) {
    $.ajax({
        url: '/Home/getCategoryItems',
        type: "GET",
        cache: false,
        data: {
            name: $(this).attr("name")
        },
        success: function (data) {

            $("#displayCarsSection").append(data);
        }
    });

    } else {
        $("#displayCarsSection").html('');
    }
});

所以现在，这将在每次检查/取消选中时监听

来源：http://icheck.fronteed.com/

【讨论】：