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

Question

我的复选框很少。当我点击其中任何一个时，我将值传递给span。一切似乎都很好，但有些东西是我无法解决的。当我单击第一次将值传递给我的span时（选中复选框）但是当我取消选中此复选框时，值再次传递到span，而不是从我的span中删除它。接下来，当我想写自己的文本时，我还有其他复选框。当我点击它时，我看到输入。我不能写文字，它将被附加到我的跨度。当我取消选中此复选框时，我也希望删除此值。最后，我想为空元素添加红色边框。有人可以帮帮我吗？

＆＃13;

＆＃13;

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

＆＃13;

input:disabled {
    opacity: 0;
}

input:enabled {
    opacity: 1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

单击每个复选框时，您需要遍历所有复选框

注意我把整个东西包裹在标签中。

＆＃13;

＆＃13;

$('.component-other-value, .fruits').on('change', function() {
  var fruits = [], other = [];
  $('.component-other-value, .fruits').each(function()  {
    if (this.checked) {
      var dataName = $(this).attr('data-product');
      var value = $(this).val();
      if (dataName) other.push(value)
      else fruits.push(value)
    }  
  });  
  $('#summary_fruits').text(fruits.join(","));
  $('#summary_other_fruits').text(other.join(","));
  
});

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

＆＃13;

input:disabled {
  opacity: 0;
}

input:enabled {
  opacity: 1;
}

＆＃13;

<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">
        <label>
          <input type="checkbox" name="fruits" id="fruit-pineapple" value="Ananas" class="fruits checkbox">
          <img src="img/ananas.png">
          <p class="description">Ananas</p>
        </label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="input-item">
        <label>
          <input type="checkbox" name="fruits" id="fruit-apple" value="Jabłko" class="fruits checkbox">
          <img src="img/jablko.png">
          <p class="description">Jabłko</p>
        </label>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="input-item">
        <label>
          <input type="checkbox" name="fruits" id="fruits-oth" class="component-other">
          <img src="img/owoce-wlasne.png">
          <p class="description">Własna propozycja</p>
        </label>
      </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">
        <label>
          <input type="checkbox" name="fruits" id="fruit-nofruit" value="Bez owoców" class="fruits checkbox">
          <img src="img/owoce-brak.png">
          <p class="description">Bez owoców</p>
        </label>
      </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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$('.checkbox').on('click', function(){
		var check = $(this);//PROPERTIES OF CLICKED CHECKBOX
		var dataAttr = $(this).attr('name');
		var dataAttrVal = $(this).val();
		 if (check.prop('checked')==true){ // check weather checkbox is checked.
    	    $('[name="' + dataAttr + '-value"]').append(dataAttrVal + ", ");
        	$('#summary_' + dataAttr).append(dataAttrVal + ", ");
		 }
		 else { //if not remove the occurence of value that you unchecked
			str = $('#summary_' + dataAttr).html();
			$('#summary_' + dataAttr).html(str.replace(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);
    });

＆＃13;

input:disabled {
    opacity: 0;
}

input:enabled {
    opacity: 1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

you can see this it would help you:

https://jsfiddle.net/5x8bdd51/3/