Zeige alle Kontrollkästchen Elemente mit der gleichen ID in HTML-Seite

Ich erstelle eine HTML-Seite, die eine Tabelle enthält, und in der Kopfzeile der Tabelle über einige Spalten gibt es eine Schaltfläche, die beim Klicken auf alle Benutzer angezeigt werden soll Kontrollkästchen, die in jeder Zeile dieser Spalte vorhanden sind.Zeige alle Kontrollkästchen Elemente mit der gleichen ID in HTML-Seite

Ich versuche, eine leere CSS-Klasse zu erstellen, und das versuchte, diese Kontrollkästchen mit einem jQuery ('.label.checkbox-label').show(); aus einer JavaScript-Methode zu zeigen, aber es funktioniert nicht.

wie dies zu machen, kann ich eine id für alle Kontrollkästchen oder abhängig von CSS-Klasse, aber beides funktioniert nicht.

Unten ist mein Code, der den HTML enthält, ich habe nur einen anderen id s für die Kontrollkästchen, um meine Idee und was ich tun soll, zu zeigen.

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>

Quelle

2016-10-07 Laila

ID sollte eindeutig Verwendung Klasse statt – guradio

@guradio sein könnte u mir ein Snippet veranschaulichen, wie zu bedienen die Klasse, weil ich es versuchte und es nicht funktionierte, ich denke, ich habe etwas falsch gemacht, aber nicht in der Lage, es zu erkennen – Laila

ID sollte einzigartig sein, könnte Dinge brechen. U kann eine spezielle Klasse für diese Funktionalität verwenden – lordkain

versuchen, diese am besten und einfache reine Javascript Beispiel

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>

Quelle

2016-10-07 07:15:25

Okay danke, werde dies versuchen, aber nur wissen müssen, sollte ich die Klasse (cbgroup1) als CSS-Klasse in meiner HTML-Seite definieren? ? – Laila

nein Sie müssen keine CSS-Klasse definieren, es ist nur eine einfache Demo? –

danke für deine Hilfe, es funktioniert jetzt gut :) – Laila

Zeige alle Kontrollkästchen Elemente mit der gleichen ID in HTML-Seite

Antwort

Verwandte Themen