javascript - 第二次单击时删除附加数据

Question

我有几个复选框。当我点击其中任何一个时，我将值传递给 span。一切似乎都很好，但有些事情我无法解决。当我第一次单击时，值被传递到我的跨度(选中复选框)但是当我取消单击此复选框时，值再次传递到跨度而不是从我的跨度中删除它。接下来，当我想编写自己的文本时，我有其他复选框。当我点击它时，我看到了输入。我不会写文字，它会被附加到我的范围内。当我取消选中此复选框时，我也想删除此值。最后一件事，我想为空元素添加红色边框。谁能帮帮我？

    $('.checkbox').on('click', function(){
        var dataAttr = $(this).attr('name');
        var dataAttrVal = $(this).val();
        $('[name="' + dataAttr + '-value"]').append(dataAttrVal + ", ");
        $('#summary_' + dataAttr).append(dataAttrVal + ", ");
    });

    $('.component-other-value').on('change touchstart tap', function(){
        var dataName = $(this).attr('data-product');
        var value = $(this).val();
        $('#summary_other_' + dataName).text(value);
        $('[name="' + dataName + '-value"]').append(value + ", ");
    });

    $('.component-other').on('click', function(){
        $(this).closest('.container')
                .find('.component-other-value')
                .prop("disabled", !this.checked);
    });

input:disabled {
    opacity: 0;
}

input:enabled {
    opacity: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
        <div class="input-item">
            <input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
            <label for="fruit-pineapple"><img src="img/ananas.png"></label>
            <p class="description">Ananas</p>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="input-item">
            <input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
            <label for="fruit-apple"><img src="img/jablko.png"></label>
            <p class="description">Jabłko</p>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="input-item">
            <input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
            <label for="fruits-oth"><img src="img/owoce-wlasne.png"></label>
            <p class="description">Własna propozycja</p>
        </div>
    </div>
    <input type="text" name="fruits-other" id="fruits-other" class="component-other-value" data-product="fruits" placeholder="Wpisz owoce" disabled>
    <div class="col-sm-3">
        <div class="input-item">
            <input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
            <label for="fruit-nofruit"><img src="img/owoce-brak.png"></label>
            <p class="description">Bez owoców</p>
        </div>
    </div>
</div>

<p>
    Owoce: <br>
    <span id="summary_fruits" class="summary"></span>
    <span id="summary_other_fruits" class="summary" style="border-bottom: 1px solid red;"></span>
</p>
</div>

Answer 1

检查复选框被选中或未被选中时是否触发事件。

$('.checkbox').on('click', function(){
   if($(this).is(':checked')){
       //do you logic when the checkbox is checked.
   }else{
       //do your logic when the checkbox is not checked.
   }
});