Блог

Главная - Вопросы по программированию - показать все элементы флажка с одинаковым идентификатором на странице html

показать все элементы флажка с одинаковым идентификатором на странице html

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я создаю HTML-страницу, содержащую таблицу, и в заголовке таблицы над некоторыми столбцами существует кнопка, которая при нажатии на нее пользователем должна показывать все флажки, которые существуют в каждой строке этого столбца.

Я пытаюсь создать пустой класс CSS, и попытался показать эти флажки, используя jQuery ('.label.checkbox-label').show(); из метода javascript, но это не работает.

как это сделать, я могу сделать один 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>

Комментарии:

1. Идентификатор должен быть уникальным используйте класс вместо

2. @guradio не могли бы вы проиллюстрировать мне фрагмент того, как использовать класс, потому что я пытался, и это не сработало, я думаю, что я сделал что-то не так, но не смог это обнаружить

3. Идентификатор должен быть уникальным, может что-то сломать. Вы можете использовать специальный класс для этой функциональности

4. @lordkain мне нужен и пример, пожалуйста

Ответ №1:

попробуйте это 

 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>

Комментарии:

1. Хорошо, спасибо, попробую это, но просто нужно знать, должен ли я определять класс (cbgroup1) как класс css на моей HTML-странице??

2. нет, вам не нужно определять какой-либо класс css, это просто демонстрация?