Question

我有5个复选框。我只想在选中3td复选框时显示DIV（class =“hideDiv”）（值=“3”）

<td class="longLabel">
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='1'  /> <label>Waiting for support to reply</label></p>
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='2'  /> <label>Waiting for customer to reply</label></p>
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='3'  /> <label>Solved</label></p>
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='4'  /> <label>QA</label></p>
    <p><input type='checkbox' class='tinyField' name='statusID_Array[]' value='5'  /> <label>Waiting for programmer to reply</label></p>            
</td>


<div id='3' class="hideDiv" style='display: none; clear: both'>
   content
</div>

Answer 1

这是代码。它仅显示div，当且仅当检查第三个时，而不是第三个和另一个。如果选择了3rd，则可以更改为显示。

$(".tinyField").change(function() {
    if ($(".tinyField:checked").val() === "3" && $(".tinyField:checked").length === 1) {
        $(".hideDiv").show();
    } else {
        $(".hideDiv").hide();
    }
});

＆＃13;

$(".tinyField").change(function() {
    if ($(".tinyField:checked").val() === "3" && $(".tinyField:checked").length === 1) {
        $(".hideDiv").show();
    } else {
        $(".hideDiv").hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<td class="longLabel">
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' />
        <label>Waiting for support to reply</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' />
        <label>Waiting for customer to reply</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' />
        <label>Solved</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' />
        <label>QA</label>
    </p>
    <p>
        <input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' />
        <label>Waiting for programmer to reply</label>
    </p>
</td>


<div id='3' class="hideDiv" style='display: none; clear: both'>
    content
</div>

＆＃13;

Answer 2

这是vanilla javascript解决方案

window.onload = function() {
  var checkboxes = document.querySelectorAll('input[type=checkbox]');
var thirdDiv=    document.getElementById('3');
  checkboxes.forEach(function(checkbox) {
    
    checkbox.addEventListener('change', function() {
      var value = this.value;
      if (this.value == 3 && this.checked) {
        thirdDiv.classList = 'hideDiv';
      }
      else
        thirdDiv.classList="";
    });
  });


}

.hideDiv {
  display: none;
  clear: both;
}

<p>
  <input type='checkbox' class='tinyField' name='statusID_Array[]' value='1' />
  <label>Waiting for support to reply</label>
</p>
<p>
  <input type='checkbox' class='tinyField' name='statusID_Array[]' value='2' />
  <label>Waiting for customer to reply</label>
</p>
<p>
  <input type='checkbox' class='tinyField' name='statusID_Array[]' value='3' />
  <label>Solved</label>
</p>
<p>
  <input type='checkbox' class='tinyField' name='statusID_Array[]' value='4' />
  <label>QA</label>
</p>
<p>
  <input type='checkbox' class='tinyField' name='statusID_Array[]' value='5' />
  <label>Waiting for programmer to reply</label>
</p>
</td>


<div id='3'>
  content
</div>

希望有所帮助

显示特定复选框的DIV

2 个答案: