उदाहरण
jQuery toggleClass() और prop() से सभी चेकबॉक्स सिलेक्ट/अनसिलेक्ट करें।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.changeColor { color: red; }
</style>
</head>
<body>
<input type="button" id="selectDemo" value="Want To Select All Values" />
<table>
<tr><td><input type="checkbox" id="CheckBoxId1" class="isSelected" /> Javascript</td></tr>
<tr><td><input type="checkbox" id="CheckBoxId2" class="isSelected" /> MySQL</td></tr>
<tr><td><input type="checkbox" id="CheckBoxId3" class="isSelected" /> MongoDB</td></tr>
<tr><td><input type="checkbox" id="CheckBoxId4" class="isSelected" /> Python</td></tr>
</table>
<script>
jQuery("#selectDemo").click(function() {
jQuery(this).toggleClass("changeColor");
if (jQuery(this).hasClass("changeColor")) {
jQuery(".isSelected").prop("checked", true);
jQuery(this).val("Want To UnSelect All Values");
} else {
jQuery(this).removeClass("changeColor");
jQuery(".isSelected").prop("checked", false);
jQuery(this).val("Want To Select All Values");
}
});
</script>
</body>
</html>
फ़ाइल सेव करें और Live Server से खोलें।
आउटपुट
बटन क्लिक करने पर सभी चेकबॉक्स टॉगल होंगे।