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

Question

我想在取消选中复选框后清除 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('');
    }
});

Answer 1

为什么不使用更改侦听器？据我所知，'click' 应该也可以。

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

Answer 2

由于您想在未选中时清除复选框的特定数据，您可以将其存储在一个对象中。因此，无论何时选中或取消选中复选框，您都可以清除 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);
}

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

所以现在，这将在每个 check/uncheck

中收听

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

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

How to clear content of div using ICheck.js?

javascript

jquery

ajax

icheck