根据评论中的链接。

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代码？示例：选中复选框“红色”显示内容“红色”并取消选中“红色”隐藏内容“红色”。与网站https://www.designquote.net/html/dq_estimate_wizard.cfm

一样

Answer 1

不需要Javascript或jQuery。 CSS也可以这样做，方法是将文本包裹在<span>中并使用:checked pseudo class与+ 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>

根据评论中的链接。

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

取消选中/检查节目内容jquery？

1 个答案:

根据评论中的链接。