在html页面中显示所有具有相同ID的复选框元素

时间：2016-10-07 07:05:25

标签： javascript jquery html

我正在创建一个包含表格的HTML页面，并且在上面某些列的标题处有一个按钮，当用户点击它时，该按钮应显示该列每行上的所有复选框。

我尝试创建一个空的CSS类，并试图在javascript方法中使用jQuery ('.label.checkbox-label').show();显示此复选框，但它不起作用。

如何做到这一点，我可以为所有复选框创建一个id或依赖CSS类，但两者都不起作用。

下面是我的代码，其中包含HTML，我只是为复选框设置了不同的id来显示我的想法和我应该做的事情。 

 function showDiv(x) {
   document.getElementById('1').style.display = "block";
   document.getElementById('edit1').style.visibility = "hidden";
   document.getElementById('td1').style.backgroundColor = "cadetblue";
   document.getElementById('tdd1').style.backgroundColor = "cadetblue";
   document.getElementById('tddd1').style.backgroundColor = "cadetblue";
   //$('.label.checkbox-label').show();
   document.getElementById('Column5_1').style.visibility = "visible";
   document.getElementById('Column5_2').style.visibility = "visible";
   document.getElementById('Column5_3').style.visibility = "visible";
   document.getElementById('Column5_4').style.visibility = "visible";

 }

 function HideDialog(x) {
   document.getElementById('1').style.display = "none";
   document.getElementById('edit1').style.visibility = "visible";
   document.getElementById('td1').style.backgroundColor = "transparent";
   document.getElementById('tdd1').style.backgroundColor = "transparent";
   document.getElementById('tddd1').style.backgroundColor = "transparent";
 }

 $(document).ready(function() {
   jQuery("#tree ul").hide();

   jQuery("#tree li").each(function() {
     var handleSpan = jQuery("<span></span>");
     handleSpan.addClass("handle");
     handleSpan.prependTo(this);

     if (jQuery(this).has("ul").size() > 0) {
       handleSpan.addClass("collapsed");
       handleSpan.click(function() {
         var clicked = jQuery(this);
         clicked.toggleClass("collapsed expanded");
         clicked.siblings("ul").toggle();
       });
     }
   });
 })
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  padding-left: 0.5em;
}
table.classname td {
  background-color: antiquewhite;
}
.handle {
  background: transparent url(/images/spacer.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  display: block;
  float: left;
  width: 10px;
  height: 11px;
}
.collapsed {
  background: transparent url(/images/plus-black.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  cursor: pointer;
}
.expanded {
  background: transparent url(/images/minus-black.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  cursor: pointer;
}
label.checkbox-label {
  /*some styles here*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="page-header">
  <h1>hello</h1>
  <div class="class=" col-lg-7 ">
            <p class="bs-component ">
                <a href="# " class="btn btn-primary ">Expand All</a>
                <a href="# " class="btn btn-primary ">Show hide regions</a>
            </p>
            <p class="bs-component ">
                <a href="# " class="btn btn-primary ">Collapse All</a>
                <a href="# " class="btn btn-primary ">Show hide countries</a>
            </p>
        </div>
        </div>
        <div id="container " style="overflow: auto;border:groove;height:4% ">
    <div id="table-header " style="padding-left:2% ">
        <table class="table table-striped table-hover ">
            <thead>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td id="td1 "><div id="1 " style="display:none;background-color:cadetblue " > 
                        <label>insert</label><input type="text " />
                                     <div class="class=" col-lg-7">
    <p class="bs-component">
      <a href="#" class="btn btn-xs btn-primary" onclick="HideDialog();">Add for selected</a>
      <a href="#" class="btn btn-xs btn-primary">Clear and insert</a>
    </p>
  </div>
  </td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td id="tdd1"><a id="edit1" href="#" class="btn btn-xs btn-primary" onclick="showDiv(1)">edit</a>
    </td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td><a href="#" class="btn btn-xs btn-primary">edit</a>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td id="tddd1">Comment</td>
    <td>Region</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>Comment</td>
    <td>Region</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>Comment</td>
    <td>Region</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
    <td>Comment</td>
    <td>Region</td>
    <td>xxxxx</td>
    <td>xxxxx</td>
  </tr>
  </thead>
  </table>
</div>

<div id="tabel-details">
  <ul id="tree">
    <li>
      Section A
      <ul>
        <li>
          Line Item
          <ul>
            <li>
              <table class="table table-striped table-hover">
                <thead style="visibility:hidden">
                  <tr>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>Comment</td>
                    <td>Region</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>Comment</td>
                    <td>Region</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>Comment</td>
                    <td>Region</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                    <td>Comment</td>
                    <td>Region</td>
                    <td>xxxxx</td>
                    <td>xxxxx</td>
                  </tr>
                </thead>
                <tr>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>
                    <input id="Column5_1" class="label.checkbox-label" type="checkbox" style="visibility:hidden" />xxxxx
                  </td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                </tr>
                <tr>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>
                    <input id="Column5_2" type="checkbox" style="visibility:hidden" />xxxxx
                  </td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                </tr>
                <tr>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>
                    <input id="Column5_3" type="checkbox" style="visibility:hidden" />xxxxx
                  </td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                </tr>
                <tr>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>
                    <input id="Column5_4" type="checkbox" style="visibility:hidden" />xxxxx
                  </td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                  <td>xxxxx</td>
                </tr>

              </table>

            </li>
          </ul>
        </li>

      </ul>
    </li>
  </ul>

</div>
</div>

<div id="footer">
  <div class="class=" col-lg-7 ">
            <p class="bs-component ">
                <a href="# " class="btn btn-primary ">Manage sections</a>
                <a href="# " class="btn btn-primary ">Manage Columns</a>
            </p>
            </div>
        </div>

1 个答案:

答案 0 :(得分：1)

尝试这个最好简单的纯javascript示例 

function togglecheckboxes(master,group){
	var cbarray = document.getElementsByClassName(group);
	for(var i = 0; i < cbarray.length; i++){
		var cb = document.getElementById(cbarray[i].id);
		cb.checked = master.checked;
	}
}
<input type="checkbox" id="cbgroup1_master" onchange="togglecheckboxes(this,'cbgroup1')"> Toggle All
<br><br>
<input type="checkbox" id="cb1_1" class="cbgroup1" name="cbg1[]" value="1"> Item 1<br>
<input type="checkbox" id="cb1_2" class="cbgroup1" name="cbg1[]" value="2"> Item 2<br>
<input type="checkbox" id="cb1_3" class="cbgroup1" name="cbg1[]" value="3"> Item 3<br>
<input type="checkbox" id="cb1_4" class="cbgroup1" name="cbg1[]" value="4"> Item 4<br>

相关问题
最新问题