Je veux créer un interrupteur à bascule personnalisé qui, lorsqu'il est activé, sélectionnera tous les éléments de ul li et lorsqu'il est désactivé, désélectionne tous les éléments de ul li. fonctionnalité ensemble plz aide.

 $('#projects-menu').append("<li  value='sales1' class='disabled'>Sales 1</li>")
  $('#projects-menu').append("<li  value='sales2'>Sales 2</li>")
 $('#projects-menu').append("<li  value='sales3'>Sales 3</li>")

$('#projects-menu').on('click', 'li', function() {
          $("#projects-menu li").removeClass('selected');
          $(this).addClass('selected');
        })
ul.menu {
            margin-top: 30px;
            list-style-type: none;
        }

        ul.menu li {
            background-color: #e0e0e0;
            padding: 8px 12px;
            border: solid 2px white;
            cursor: pointer;
            border: 3px solid #FFFFFF;
            border-radius: 10px;
        }

        ul.menu li:hover {
            background-color: #A9A9A9;
        }

        ul.menu li.selected {
            background-color: #23ac61;
        }



        ul.menu li.disabled:hover {
            background-color: #e0e0e0;
            cursor:default;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects">
        <ul class="menu" id="projects-menu">
        </ul>
 </div>

 <div class="custom-control custom-switch">
          <input type="checkbox" class="custom-control-input switchc" id="customSwitch2" checked>
          <label class="custom-control-label" for="customSwitch2">Toggle me</label>
 </div>
1
kavya 3 sept. 2020 à 06:50

2 réponses

Meilleure réponse

Vous pouvez utiliser la fonction forEach et la méthode querySelectorAll pour obtenir tous les ul> li et appliquer la classe sélectionnée sur laquelle vous basculez votre commutateur.

Vous devez event delegation là-dedans car les elements sont ajoutés dynamiquement au DOM

Si la bascule est activée et désactivée, vous pouvez le vérifier en utilisant jQuery is function et : attribut vérifié

Modifier: depuis que vous avez ajouté que vous souhaitez effectuer une sélection multiple en maintenant la touche control enfoncée, puis click pour faire multi selection et de même le {{X3} } avec Ctrl key enfoncée

Démo en direct:

$(document).ready(function() {
  $('#projects-menu').append("<li  value='sales1'>Sales 1</li>")
  $('#projects-menu').append("<li  value='sales2'>Sales 2</li>")
  $('#projects-menu').append("<li  value='sales3'>Sales 3</li>")

  $(document).on('click', '#projects-menu > li', function(event) {
    event.preventDefault();
    if (event.ctrlKey) {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      } else {
        $(this).addClass("selected");
      }
    } else {
      $("#projects-menu > li").removeClass("selected");
      $(this).addClass("selected");
    }
  });

  let getCheckboxes = document.querySelectorAll('#projects-menu > li') //get checkboxes UL
  $(document).on('change', '#customSwitch2', function() {
    var $this = $(this)
    getCheckboxes.forEach(function(o) {
      if ($this.is(':checked')) {
        $(o).addClass('selected');
      } else {
        $(o).removeClass('selected');
      }
    })
  })
})
ul.menu {
  margin-top: 30px;
  list-style-type: none;
}

ul.menu li {
  background-color: #e0e0e0;
  padding: 8px 12px;
  border: solid 2px white;
  cursor: pointer;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
}

ul.menu li:hover {
  background-color: #A9A9A9;
}

ul.menu li.selected {
  background-color: #23ac61;
}

ul.menu li.disabled:hover {
  background-color: #e0e0e0;
  cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="projects">
  <ul class="menu" id="projects-menu">
  </ul>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input switchc" id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Toggle me</label>
</div>
1
Always Helping 3 sept. 2020 à 04:39

Essayez comme ça

function check_uncheck_checkbox(isChecked) {
    if(isChecked) {
        $('input[name="language"]').each(function() { 
            this.checked = true; 
        });
    } else {
        $('input[name="language"]').each(function() {
            this.checked = false;
        });
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divCheckAll">
<input type="checkbox" name="checkall" id="checkall" onClick="check_uncheck_checkbox(this.checked);" />Check All</div>
<br/>
<div id="divCheckboxList">
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language1" value="English" />English</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language2" value="French" />French</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language3" value="German" />German</div>
    <div class="divCheckboxItem"><input type="checkbox" name="language" id="language4" value="Latin" />Latin</div>
</div>

L'espoir sera utile

1
Santosh Shinde 3 sept. 2020 à 04:04