Выбрать все | Снимите все флажки с помощью переключателя - PullRequest
Новая
       11

Выбрать все | Снимите все флажки с помощью переключателя

0 голосов
/ 10 сентября 2018

Мне нужно выбрать все и снять все флажки на кнопке переключения.

вот HTML-код для флажков 

<div class="accordion-header js-accordion-header">
<input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" style="display: none;">
<label for="labelauty-2">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>  tc_Logout
</div>

при установке этого флажка aria-checked = "true" автоматически добавляется к <label for="labelauty-2">, который выводит этот 

<label for="labelauty-1" aria-checked="true">
<span class="labelauty-unchecked-image"></span>
<span class="labelauty-checked-image"></span>
</label>

Изменяет статус на true или false , когда его проверяют и не проверяют.

Теперь у меня есть несколько таких флажков, которые нужно установить или снять, используя кнопку переключения.

вот мой HTML-код для кнопки переключения 

<div class="toggle-wrap w-checkbox float-right">
  <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkboxtoggle" onclick="toggle()">
  <label class="toggle-label w-form-label" for="Toggle-Switch"></label>
  <div class="toggle">
    <div class="toggle-active">
      <div class="active-overlay"></div>
      <div class="top-line"></div>
      <div class="bottom-line"></div>
    </div>
  </div>
</div>

Вот мой JS-код, который возвращает ошибку «реквизит не определен» 

function toggle(source) {
  checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

Как мне этого добиться, используя javascript или jquery

Ответы [ 2 ]

0 голосов
/ 10 сентября 2018

Попробуйте это, чтобы выбрать / отменить выбор Чечбокс 

  $(document).on('click','#chkAll',function(){
  if($(this).prop('checked')==true){
  	$('.ChkSelect').attr("checked",true)
  }
  else
  {
  $('.ChkSelect').attr("checked",false)
  }  
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect">
<input type="checkbox" class="ChkSelect"><br/><br/>
Select/Deselect All :<input type="checkbox" id="chkAll"> <br/><br/>
0 голосов
/ 10 сентября 2018

Работает (без прослушивателей событий)

Примечание. См. Следующий пример, который использует прослушиватели событий и является предпочтительным.

У вас были некоторые проблемы, которые мне пришлось исправить, чтобы заставить это работать.

См .: https://jsfiddle.net/0p64mdsg/4

Во-первых, ваши типы ввода не были переключателями. Во-вторых, вы не передавали this, когда вызывали функцию переключения.

Текущая версия кода в моем jsFiddle: 

function toggle(source) {
  checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
  alert('TEST2');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

    
<div class="accordion-header js-accordion-header">
  <input type="checkbox" class="to-labelauty-icon labelauty" name="inputLableautyNoLabeledCheckbox" data-plugin="labelauty" data-label="false" id="labelauty-2" value="tc_Logout" aria-hidden="true" >
  <label for="labelauty-2">
  <span class="labelauty-unchecked-image"></span>
  <span class="labelauty-checked-image"></span>
  </label>  tc_Logout
  </div>

  <label for="labelauty-1" aria-checked="true">
  <span class="labelauty-unchecked-image"></span>
  <span class="labelauty-checked-image"></span>
  </label>
  Test1
  <div class="toggle-wrap w-checkbox float-right">
    <input class="toggle-ticker w-checkbox-input" data-ix="toggle-switch" data-name="Toggle Switch" id="Toggle-Switch" name="Toggle-Switch" type="checkbox" onclick="toggle(this)">
    <label class="toggle-label w-form-label" for="Toggle-Switch"></label>
    <div class="toggle">
      <div class="toggle-active">
        <div class="active-overlay"></div>
        <div class="top-line"></div>
        <div class="bottom-line"></div>
      </div>
    </div>
  </div>

Использование прослушивателей событий

Так как onClick не является предпочтительным, вы должны обрабатывать переключение кликов следующим образом: https://jsfiddle.net/0p64mdsg/15/

<script>

document.getElementById("Toggle-Switch").addEventListener("click", toggle);

function toggle(source) {
  checkboxes = document.getElementsByName('inputLableautyNoLabeledCheckbox');
  alert('TEST2' + source);
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = document.getElementById("Toggle-Switch").checked;
  }
}

</script>
...