在html頁面中顯示具有相同id的所有複選框元素

我正在創建一個包含表格的HTML頁面，並且在表格上方的某些列的標題處存在一個按鈕，當用戶單擊它時應顯示全部複選框存在於此列的每一行上。在html頁面中顯示具有相同id的所有複選框元素

我嘗試創建一個空的CSS類，試圖在JavaScript方法中使用jQuery ('.label.checkbox-label').show();顯示此複選框，但它不起作用。

如何做到這一點，我可以做一個id所有複選框或依賴於CSS類，但都不起作用。

下面是我的代碼，其中包含的HTML，我只是設置不同的id s複選框來顯示我的想法和我應該做的事情。

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>

來源

2016-10-07 Laila

ID應該是唯一使用類，而不是 – guradio

@guradioü可以說明我如何使用代碼段班，因爲我試過了，它沒有工作，我想我犯了錯誤，但無法檢測到它 – Laila

ID應該獨一無二，可能會破壞事物。 U可以使用這個功能的特殊類 – lordkain

試試這個最簡單的純JavaScript例

function togglecheckboxes(master,group){ 
 
\t var cbarray = document.getElementsByClassName(group); 
 
\t for(var i = 0; i < cbarray.length; i++){ 
 
\t \t var cb = document.getElementById(cbarray[i].id); 
 
\t \t cb.checked = master.checked; 
 
\t } 
 
}

<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>

來源

2016-10-07 07:15:25

好吧謝謝，將嘗試這一點，但只需要知道，我應該定義類（cbgroup1）作爲一個CSS類在我的HTML頁面？？ – Laila

不，你不需要定義任何css類，它只是簡單的演示？ –

感謝您的幫助，它現在正常工作:) – Laila

在html頁面中顯示具有相同id的所有複選框元素

回答

相關問題