<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
/* Custom checkbox style */
.custom-checkbox input[type="checkbox"] {
display: none; /* Hide the default checkbox */
}
.custom-checkbox li {
position: relative;
padding-left: 35px; /* Adjust according to the size of the checkmark */
cursor: pointer;
}
/* Style for the custom checkmark */
.custom-checkbox li::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 25px; /* Adjust the size of the checkmark */
height: 25px; /* Adjust the size of the checkmark */
border: 2px solid #555; /* Border color */
background-color: #fff; /* Background color */
}
/* Style for the checkmark when checkbox is checked */
.custom-checkbox input[type="checkbox"]:checked + li::before {
background-color: #2196F3; /* Change background color when checked */
}
/* Style for the checkmark icon */
.custom-checkbox li::after {
content: '\2713'; /* Unicode character for checkmark */
font-size: 20px; /* Adjust the size of the checkmark */
position: absolute;
top: 50%;
left: 4px; /* Adjust the position of the checkmark */
transform: translateY(-50%);
color: #fff; /* Checkmark color */
display: none;
}
/* Show the checkmark icon when checkbox is checked */
.custom-checkbox input[type="checkbox"]:checked + li::after {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="dd">
<li>
<input type="checkbox" name="skill" value="male"> Male
</div>
<div class="dd">
<div class="dd">
<li>
<input type="checkbox" name="skill" value="female"> Female
</li>
</div>
</div>
<div id="result"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function() {
// Get the value of the checkbox
var checkedValue = $(this).val();
// Remove 'custom-checkbox' class from all <li> elements
$('li').removeClass('custom-checkbox');
// Add 'custom-checkbox' class to the parent <li> of the checked checkbox
$(this).closest('li').addClass('custom-checkbox');
// Uncheck other checkboxes
$('input[type="checkbox"]').not(this).prop('checked', false);
// Output the value of the checked checkbox
console.log(checkedValue);
});
});
</script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function() {
// Get the value of the checkbox
var checkedValue = $(this).val();
// Remove 'custom-checkbox' class from all parent <div> elements with class 'dd'
$('.dd').removeClass('custom-checkbox');
// Add 'custom-checkbox' class to the parent <div> of the checked checkbox
$(this).closest('.dd').addClass('custom-checkbox');
// Uncheck other checkboxes
$('input[type="checkbox"]').not(this).prop('checked', false);
// Output the value of the checked checkbox
console.log(checkedValue);
});
});
</script>
</body>
</html>
Comments
Post a Comment