Uncheck/Check显示内容

Question

我有代码

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

我会当选中复选框显示内容和取消复选框隐藏内容。如何编写Jquery代码?例如:选中复选框"Red"，显示内容"Red"，取消选中复选框"Red"，隐藏内容"Red"。比如网站https://www.designquote.net/html/dq_estimate_wizard.cfm

Answer 1

无需Javascript或jQuery。CSS也可以做到这一点，通过在<span>中包装文本并使用:checked伪类，结合+相邻的兄弟选择器:

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

根据评论中的链接。

每次更改输入时，您都希望循环所有选中的输入，组合它们的数据值，并将其放在单独的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>