Question

我的ASP（CLassic）页面中有以下代码（从db中设置了几十个复选框的页面的一部分）：

<tr height="30px">
        <td class="summarytext">Show Gender Pay Gap Options</td>
        <td class="formtext">
                <input class="checkbox" type="checkbox" name="chkDisplayGPGOptions" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
        </td>
    <td colspan="7">&nbsp;</td>
    <td>
            <input type="button"  class="help" align="left" id="Button3" onmousemove="javascript:DisplayHelp(150,-160, 10, 'HELP', 'Select if you want to exclude this pay type in netpay for attachment calculations.', this)" onmouseout="javascript:HideHelp()" WIDTH="16px" HEIGHT="16px">
    </td>
    <DIV id="divGPGOptiona" style="display:none">
        <table>
            <tr height="30px">
                <td class="summarytext">Include Bonus in calculation for GPG reporting</td>
                <td class="formtext">
                        <input class="checkbox" type="checkbox" name="chkIncludeBonusInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
                </td>                                                    
            </tr>
            <tr height="30px">
                <td class="summarytext">Include Gross Pay in calculation for GPG reporting</td>
                <td class="formtext">
                        <input class="checkbox" type="checkbox" name="chkIncludeGrossPayInGPG" <%if g_blnchkDisplayGPGOptions = True then Response.Write("checked")%>>
                </td>                                                    
            </tr>
        </table>
    </DIV>
</tr>

我想要做的是在选中复选框divGPGOptiona时显示并隐藏DIV chkDisplayGPGOptions ...

是否有某种方法只使用CSS，或者我需要使用JavaScript和DOM吗？

Answer 1

创建一个代表“隐藏”状态的类，并在复选框更改时切换它。

了解具体方法：

var checkbox = document.querySelector('input[name="check"]');
var div = document.querySelector('#container');

checkbox.addEventListener('change', function (e) {
   if (div.classList.contains('is-hide')) {
      div.classList.remove('is-hide');
   } else {
      div.classList.add('is-hide');
   }
});

.is-hide {
  display: none;
}

<input type="checkbox" name="check" />

<div id="container">Here goes the content.</div>

Answer 2

一种可能的解决方案是使用JavaScript切换显示。你不需要jQuery。它可以在原生JavaScript中完成。

＆＃13;

var checkBox = document.getElementById("check-box");
var myDiv = document.getElementById("my-div");
myDiv.style.display = "none";

checkBox.addEventListener("click", function() {
    if (myDiv.style.display == "none") {
        myDiv.style.display = "block";
    }
    else {
        myDiv.style.display = "none";
    }
});

＆＃13;

<div id="my-div">This is a div</div>

<p>The div above is hidden by default. Click the checkbox to toggle on and off</p>

<input id="check-box" type="checkbox" />

＆＃13;

Answer 3

CSS代码：

.hidden{ display: none; }

html代码：

 <DIV id="divGPGOptiona" class="hidden" >

Jquery代码：

    $(".checkbox").on('click',function(){
         if($(".checkbox").prop("checked")){
            $("#divGPGOptiona").removeClass("hidden");
         }
        else{
          $("#divGPGOptiona").addClass("hidden");
        }
     });

Answer 4

使用兄弟+选择器的纯CSS。

如果您将div作为复选框的兄弟，那么可以这样做。为了复制，您需要更改HTML结构。建议这样做，因为您将div放在表格行<tr>内，而没有表格单元格。为什么呢？

.checkboxSibling {
  display: none;
}

/*.checkbox:checked + .checkboxSibling {
  display: block;
 }*/

input[name="chkDisplayGPGOptions"]:checked + .checkboxSibling {
  display: block;
}

<div>
  Input 1 -
  <input class="checkbox" name="chkDisplayGPGOptions" type="checkbox"/>
  <div class="checkboxSibling">Checkbox Checked</div>
</div>

<div>
  Input 2 -
  <input class="checkbox" name="someOtherName" type="checkbox"/>
  <div class="checkboxSibling">Checkbox Checked</div>
</div>

用css显示和隐藏DIV

4 个答案: