Question

在点击父级复选框时，我尝试在下面的代码中做两件事：

显示孩子的隐藏列表-CHECKBOXES
由DEFAULT

但是，某处缺少某些东西。非常感谢。代码：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="assets/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    function showMe (box) {
    var chboxs = document.querySelectorAll('[name="c1"], [name="c2"], [name="c3"], [name="c4"], [name="c5"], [name="c6"], [name="c7"], [name="c8"], [name="c9"], [name="c10"], [name="c11"], [name="c12"], [name="c13"], [name="c14"], [name="c15"], [name="c16"]');
    var vis = "none";
    for(var i=0;i<chboxs.length;i++) { 
    if(chboxs[i].checked){

    vis = "block";
    break;  // breaks or terminates the LOOP

    }

    }

    document.getElementById(box).style.display = vis;
    document.getElementById(box).siblings('ul')
    .find("input[type='checkbox']")
    .prop('checked', this.checked);

    }

    </script>    
    </head>
    <body>

    <table>
    <td width="200px">
    <input type="checkbox" name="c8" onclick="showMe('central-europe')">Central Europe
    </td>
    </table>


    <table>
    <td width="200px" style="vertical-align:top">
    <ul id="central-europe" style="list-style:none; padding-left: 0px; display:none;">

    <li><input type="checkbox" name="ceurope[]" value="EE" size="40" class="chk_box" />Estonia</li>
    <li><input type="checkbox" name="ceurope[]" value="LV" size="40" class="chk_box" />Latvia</li>
    <li><input type="checkbox" name="ceurope[]" value="LT" size="40" class="chk_box" />Lithuania</li>
    <li><input type="checkbox" name="ceurope[]" value="CZ" size="40" class="chk_box" />Czech Republic</li>
    <li><input type="checkbox" name="ceurope[]" value="HU" size="40" class="chk_box" />Hungary</li>
    <li><input type="checkbox" name="ceurope[]" value="RO" size="40" class="chk_box" />Romania</li>
    <li><input type="checkbox" name="ceurope[]" value="SI" size="40" class="chk_box" />Slovenia</li>
    <li><input type="checkbox" name="ceurope[]" value="XK" size="40" class="chk_box" />Kosovo</li>
    <li><input type="checkbox" name="ceurope[]" value="CY" size="40" class="chk_box" />Cyprus</li>


    </ul>
    </td>
    </table>

    </body>
    </html>

Answer 1

使用siblings选择器Node没有jQuery方法。另请注意，由于.siblings将返回$('#'+box)元素，因此无需使用ul方法。

在this中传递inline-function上下文以访问checked州

＆＃13;

function showMe(box, elem) {
  var chboxs = document.querySelectorAll('[name="c1"], [name="c2"], [name="c3"], [name="c4"], [name="c5"], [name="c6"], [name="c7"], [name="c8"], [name="c9"], [name="c10"], [name="c11"], [name="c12"], [name="c13"], [name="c14"], [name="c15"], [name="c16"]');
  var vis = "none";
  for (var i = 0; i < chboxs.length; i++) {
    if (chboxs[i].checked) {
      vis = "block";
      break;
    }
  }
  document.getElementById(box).style.display = vis;
  $('#' + box).find("input[type='checkbox']")
    .prop('checked', elem.checked);

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <td width="200px">
    <input type="checkbox" name="c8" onclick="showMe('central-europe',this)">Central Europe
  </td>
</table>

<table>
  <td width="200px" style="vertical-align:top">
    <ul id="central-europe" style="list-style:none; padding-left: 0px; display:none;">
      <li>
        <input type="checkbox" name="ceurope[]" value="EE" size="40" class="chk_box" />Estonia</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="LV" size="40" class="chk_box" />Latvia</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="LT" size="40" class="chk_box" />Lithuania</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="CZ" size="40" class="chk_box" />Czech Republic</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="HU" size="40" class="chk_box" />Hungary</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="RO" size="40" class="chk_box" />Romania</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="SI" size="40" class="chk_box" />Slovenia</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="XK" size="40" class="chk_box" />Kosovo</li>
      <li>
        <input type="checkbox" name="ceurope[]" value="CY" size="40" class="chk_box" />Cyprus</li>
    </ul>
  </td>
</table>

＆＃13;

Javascript复选框单击未显示已检查的兄弟姐妹

1 个答案: