Установите / снимите флажки

ProgramBox

Установите / снимите флажки

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #checkbox

#javascript #jquery #HTML #флажок

Вопрос:

HTML:

 <ol>
 <span>Select All<input id='selectall' type="checkbox" onclick='test(this.id);'>
    <ul>
      <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
      <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
    </ul>
 </span>
</ol>

JS:

 function test(clicked_id) {
    if ($("#"   clicked_id).prop("checked", true)) {
        $('#'   clicked_id   ' .'   clicked_id).prop('checked', true);
    } else {
        $('#'   clicked_id   ' .'   clicked_id).prop('checked', false);
    }
}

https://jsfiddle.net/j59eeqgu/

Я хочу выбрать свой main-checbox и установить другие флажки, но я делаю что-то неправильно. Когда я пытаюсь установить свой main-checkbox, ничего не происходит.

1. Вы правильно включили jQuery?

2. Разметка недопустима. Список ( упорядоченный / неупорядоченный ) может содержать только <li> элементы

3. function test(clicked_id) { $('#' clicked_id).closest('ol').find('input.' clicked_id).prop('checked', $("#" clicked_id).prop("checked")); }

Ответ №1:

Вы используете id для других флажков вместо class и используете одну строку this.checked вместо if condition ,

 $('#selectall').click(function(){
 $('.selectall[type="checkbox"]').prop('checked', this.checked);
});

К вашему сведению, вам следует использовать li с ul

Показать фрагмент кода

 $('#selectall').click(function(){
 $('.selectall[type="checkbox"]').prop('checked', this.checked);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <span>Select All<input id='selectall' type="checkbox">
            <ul>
        <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
        <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
            </ul>
</span>

Expand snippet

1. Вы можете улучшить отступы и предложить чистое решение, удалив все неиспользуемые html-элементы и классы..

2. Я уже упоминал об этом в своем ответе и сосредоточился на основной проблеме.

Ответ №2:

Вот рабочий пример. Я также отредактировал вашу скрипку

Показать фрагмент кода

 $(document).on('click', '#selectall', function() {
  if($(this).is(':checked'))
	$(this).parent().find('input[type="checkbox"]').prop('checked', true);
  else
    $(this).parent().find('input[type="checkbox"]').prop('checked', false);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <span>Select All<input id='selectall' type="checkbox">
  <ul>
    <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>3.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>4.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>5.<input type="checkbox" class='selectall'></span>
  </ul>
  </span>
</ol>

Expand snippet

РЕДАКТИРОВАТЬ: Обновить из комментария:

Показать фрагмент кода

 $(document).ready(function() {
	var $selects = $('input[id^="select_"]');
	$selects.on('click', function() {
  	var $checkboxes = $(this).parent().find('input[type="checkbox"]');
    $checkboxes.prop('checked', this.checked);
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ol>
  <span>Select All<input id='select_0' type="checkbox">
  <ul>
    <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
  </ul>
  </span>
</ol>
<ol>

  <span>Select All<input id='select_1' type="checkbox">
  <ul>
    <span class='selectall'>1.<input type="checkbox" class='selectall'></span>
    <span class='selectall'>2.<input type="checkbox" class='selectall'></span>
  </ul>
</span>
</ol>

Expand snippet

ПРАВКА 2: Улучшите свой HTML, вы сможете сэкономить большую часть кода и упростить его обработку. Вы можете добавить больше списков по мере необходимости.

Показать фрагмент кода

 $(document).ready(function() {
	var $list = $('ul.my-whatever');
	var $selects = $list.find('li > input[type="checkbox"]');
  
	$selects.on('click', function() {
  	var $checkboxes = $(this).parent().find('input[type="checkbox"]');
    $checkboxes.prop('checked', this.checked);
  });
});

 ul li {
  margin-bottom: 10px; 
}

ul ul li {
  margin: 0;
}

ul ul {
  list-style: decimal;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="my-whatever">
  <li>
      Select All <input type="checkbox">
      <ul>
        <li>Something <input type="checkbox"></li>
        <li>Something <input type="checkbox"></li>
      </ul>
  </li>
  <li>
      Select All <input type="checkbox">
      <ul>
        <li>Something <input type="checkbox"></li>
        <li>Something <input type="checkbox"></li>
      </ul>
  </li>
  <li>
      Select All <input type="checkbox">
      <ul>
        <li>Something <input type="checkbox"></li>
        <li>Something <input type="checkbox"></li>
      </ul>
  </li>  
</ul>

Expand snippet

Ответ №3:

 $("#selectall").change(function() {
  var parentChecked = this.checked;
        $("input.selectall").each(function(){
         $(this).prop("checked",parentChecked);
        });
});

https://jsfiddle.net/j59eeqgu/7/

Ответ №4:

Убедитесь, что в вашем коде есть span теги внутри ul .. Вам лучше использовать ul , li и добавить CSS для отображения в строке.. Таким образом, вы можете очистить свой html.

Чтобы установить все флажки, вы можете добавить функцию обработчика событий щелчка к вашему #selectall флажку:

 $('#selectall').on('click', function(){
  $('input:checkbox').prop('checked', this.checked);
});

 ul {
  list-style-type: none;
  margin: 10px 0 0 0;
  padding: 0;
}

li {
  float: left;
  padding: 0 8px 0 0;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select All <input type="checkbox" id="selectall">
<ul>
  <li>1.<input type="checkbox"></li>
  <li>2.<input type="checkbox"></li>
  <li>3.<input type="checkbox"></li>
  <li>4.<input type="checkbox"></li>
  <li>5.<input type="checkbox"></li>
</ul>

1. Спасибо, Йосвел! У вас есть идея, как заставить это работать более чем для одного списка? Давайте предположим, что у меня есть еще списки, и я проверяю случайный.

2. Не поймите превратно ваш комментарий: прямо сейчас все флажки ввода $('input:checkbox') будут проверены при нажатии #selectall

Ответ №5:

Вы можете попробовать использовать этот скрипт jQuery, чтобы добавить свою checkAll функцию в свой checkboxes .

HTML

 <ol>
  Select All
  <input id='selectall' class="selectall" type="checkbox">
  <ul>
    1.<input type="checkbox" class='selectme'> 
    2.<input type="checkbox" class='selectme'> 
    3.<input type="checkbox" class='selectme'> 
    4.<input type="checkbox" class='selectme'> 
    5.<input type="checkbox" class='selectme'>
  </ul>
</ol>

jQuery

 $(function() {
  $('.selectall').click(function() {
    $('.selectme').prop('checked', $(this).is(':checked'));
  });

  $('.selectme').click(function() {
    if ($('.selectme:checked').length == $('.selectme').length) {
      $('.selectall').prop('checked', true);
    } else {
      $('.selectall').prop('checked', false);
    }
  });
});

Я обновил ваш class для input type="checkbox"

Скрипта