Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में एक single checkbox को check ( click ) करके सभी available checkbox को select और deselect कैसे करा सकते है! jQuery script के इस्तेमाल से तो हम सब इस post में example के साथ जानेगे तो आप इस post को last तक जरूर पड़े!.
HTML Form or Records list
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
input.same_check {
margin-left: 20px;
}
</style>
<body>
<div class="">
<h1>Single click all checkbox are Selected</h1>
<div>
<div>
<input id="Allselect" type="checkbox">
<label for='selectAll'>Select All</label>
</div>
<div>
<input class="same_check" type="checkbox" value="html" />
<label for="HTML">HTML</label>
</div>
<div>
<input class="same_check" type="checkbox" value="css" />
<label for="CSS">CSS</label>
</div>
<div>
<input class="same_check" type="checkbox" value="php" />
<label for="PHP">PHP</label>
</div>
<div>
<input class="same_check" type="checkbox" value="wordpress" />
<label for="Wordpress">Wordpress</label>
</div>
<div>
<input class="same_check" type="checkbox" value="larvel" />
<label for="laravel">Laravel</label>
</div>
<div>
<input class="same_check" type="checkbox" value="jquery" />
<label for="Jquery">Jquery</label>
</div>
<div>
<input class="same_check" type="checkbox" value="shopify" />
<label for="Shopify">Shopity</label>
</div>
<div>
<input class="same_check" type="checkbox" value="Android" />
<label for="Android">Android</label>
</div>
</div>
</div>
</body>
</html>
jQuery library को include करना जरूरी है अगर हम jquery library को include नहीं कराएँगे! तो वह हम jquery script को proper perform नहीं करा सकेंगे!. तो पहले jquery library को include करना important होता है!.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
jquery Script
<script type="text/javascript">
$(document).ready(function(){
$('#Allselect').on('click',function(){
if(this.checked){
$('.same_check').each(function(){
this.checked = true;
});
}else{
$('.same_check').each(function(){
this.checked = false;
});
}
});
$('.same_check').on('click',function(){
if($('.same_check:checked').length == $('.same_check').length){
$('#Allselect').prop('checked',true);
}else{
$('#Allselect').prop('checked',false);
}
});
});
</script>
ऊपर के example में देख सकते है की हमने Select All checkbox पर click यानि check किया और उसके अंदर जितने checkbox है! वह checkbox checked हो जाते है!. और अगर Select All checkbox को uncheck करेंगे तो सभी checkbox uncheck हो जायेंगे!.
Select all checkbox में #Allselect नाम की id set करि है और Record list checkbox में हमने same_check नाम का class set करा है!. जब हम Select all checkbox की #Allselect id के साथ checkbox check करते है! तब हम check करते है की वह checkbox checked है या नहीं अगर checkbox checked है तो हम सभी same_check class वाले checkbox को checked सेट करा देते है!.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script>
$(document).ready(function(){
$("#Allselect").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked).val();
});
});
</script> -->
<script type="text/javascript">
$(document).ready(function(){
$('#Allselect').on('click',function(){
if(this.checked){
$('.same_check').each(function(){
this.checked = true;
});
}else{
$('.same_check').each(function(){
this.checked = false;
});
}
});
$('.same_check').on('click',function(){
if($('.same_check:checked').length == $('.same_check').length){
$('#Allselect').prop('checked',true);
}else{
$('#Allselect').prop('checked',false);
}
});
});
</script>
</head>
<style>
input.same_check {
margin-left: 20px;
}
</style>
<body>
<div class="">
<h1>Single click all checkbox are Selected</h1>
<div>
<div>
<input id="Allselect" type="checkbox">
<label for='selectAll'>Select All</label>
</div>
<div>
<input class="same_check" type="checkbox" value="html" />
<label for="HTML">HTML</label>
</div>
<div>
<input class="same_check" type="checkbox" value="css" />
<label for="CSS">CSS</label>
</div>
<div>
<input class="same_check" type="checkbox" value="php" />
<label for="PHP">PHP</label>
</div>
<div>
<input class="same_check" type="checkbox" value="wordpress" />
<label for="Wordpress">Wordpress</label>
</div>
<div>
<input class="same_check" type="checkbox" value="larvel" />
<label for="laravel">Laravel</label>
</div>
<div>
<input class="same_check" type="checkbox" value="jquery" />
<label for="Jquery">Jquery</label>
</div>
<div>
<input class="same_check" type="checkbox" value="shopify" />
<label for="Shopify">Shopity</label>
</div>
<div>
<input class="same_check" type="checkbox" value="Android" />
<label for="Android">Android</label>
</div>
</div>
</div>
</body>
</html>
