muliselectdropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Select All Checkbox</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content label {
display: block;
margin-top: 10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="d1">
<button>select Corporate </button>
<br>
<div class="dropdown">
<div class="dropdown-content">
<input type="checkbox" id="selectAllCheckbox">
Select All
<label><input type="checkbox" name="fruits" value="apple" class="checkboxes"> Apple</label>
<label><input type="checkbox" name="fruits" value="orange" class="checkboxes"> Orange</label>
<label><input type="checkbox" name="fruits" value="banana" class="checkboxes"> Banana</label>
<label><input type="checkbox" name="fruits" value="grape" class="checkboxes"> Grape</label>
<label><input type="checkbox" name="fruits" value="grape" class="checkboxes"> Grape</label>
</div>
</div>
</div>
<script>
$('#selectAllCheckbox').change(function () {
$('.checkboxes').prop('checked', $(this).prop('checked'));
});
$('button').click(function(){
var dropdown = document.querySelector('.dropdown-content');
if (!dropdown.contains(event.target)) {
dropdown.style.display = 'block';
}
})
</script>
</body>
</html>
https://www.geeksforgeeks.org/how-to-create-a-select-all-checkbox-in-javascript/
https://www.dhiwise.com/post/multiselect-dropdown-html-selecting-multiple-options
Comments
Post a Comment