[Solved] Uncheck/Check show content jquery?

by


No need for Javascript or jQuery. CSS can do that too, by wrapping the text in a <span> and using the :checked pseudo class, in combination with the + adjacent sibling selector:

.option-other input[type=checkbox]+span {
  display: none;
}
.option-other input[type=checkbox]:checked+span {
  display: inline;
}
<div class="option-other">
  <h5>Color:</h5>
  <input class="other-select" type="checkbox" data-price="50" data-value="Red"><span> Red </span><br/>
  <input class="other-select" type="checkbox" data-price="30" data-value="Green"><span> Green </span><br/>
  <input class="other-select" type="checkbox" data-price="40" data-value="Blue"><span> Blue </span><br/>
  <h5>Layout</h5>
  <input class="other-select" type="checkbox" data-price="50" data-value="1 Column "><span> 1 Column </span><br/>
  <input class="other-select" type="checkbox" data-price="60" data-value="2 Column"><span> 2 Column </span><br/>
  <input class="other-select" type="checkbox" data-price="70" data-value="3 Columnq"><span> 3 Column </span><br/>
</div>

Based on the link in the comment.

On every change on a input, you want to loop all the checked inputs, combine their data-values, and put that in a separate div…

$(".option-other input").on('change', function() {
  var result = "";
  $('.option-other input:checked').each( function() {
    result += $(this).data('value') + '<br />';
  });
  $('.result').html( result );
});
.option-other,
.result {
  width: 40%;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="option-other">
  <h5>Color:</h5>
  <input class="other-select" type="checkbox" data-price="50" data-value="Red"> Red <br/>
  <input class="other-select" type="checkbox" data-price="30" data-value="Green"> Green <br/>
  <input class="other-select" type="checkbox" data-price="40" data-value="Blue"> Blue <br/>
  <h5>Layout</h5>
  <input class="other-select" type="checkbox" data-price="50" data-value="1 Column "> 1 Column <br/>
  <input class="other-select" type="checkbox" data-price="60" data-value="2 Column"> 2 Column <br/>
  <input class="other-select" type="checkbox" data-price="70" data-value="3 Columnq"> 3 Column <br/>
</div>
<div class="result"></div>

4

solved Uncheck/Check show content jquery?