CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MMPL1
MMPL1

Reputation: 543

Remove appended data on second click

I have few checkboxes. When I click on any of them I pass the value to span. Everything seems to work fine but there's something that I can't resolve. When I click first time value is passed to my span (checkbox is checked) but when I unclick this checkbox, value is passing to span again instead of delete it from my span. Next thing, when I want to write my own text I have other checkbox for that. When I click on it I see input. I cant write text and it will be appended to my span. I want to remove this value too when I unclick this checkbox. Last thing, I want to add red border to empty elements. Anyone could help me?

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

Upvotes: 0

Views: 170

Answers (3)

Gyandeep Sharma
Gyandeep Sharma

Reputation: 2327

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

Upvotes: 0

mplungjan
mplungjan

Reputation: 177860

You need to loop over all checkboxes when each checkbox is clicked

Note I wrapped the whole thing in the label.

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

Upvotes: 1

Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

check whether the event is fired when the checkbox is checked or not checked.

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

Upvotes: 1

Related Questions