à®à®®à¯, à®ªà®¯à®©à¯à®ªà®à¯à®¤à¯à®¤à®µà¯à®®à¯ $(.myCheckBox).prop(checked, !$(.myCheckBox).prop(checked)) à®à®°à®¿à®ªà®¾à®°à¯à®à¯à®à®ªà¯à®ªà®à¯à® à®¨à®¿à®²à¯à®¯à¯ à®®à®¾à®±à¯à®±.

jQuery ஐப் பயன்படுத்தி

Mia Chevalier

ஞாயிறு, 9 ஜூன், 2024 ’அன்று’ பிற்பகல் 3:05:27

jQuery மற்றும் செக்பாக்ஸ்களுடன் பணிபுரிதல்

படிவ கூறுகளை கையாள jQuery ஐப் பயன்படுத்துவது வலை உருவாக்குபவர்களுக்கு பொதுவான பணியாகும். செக்பாக்ஸின் "சரிபார்க்கப்பட்ட" சொத்தை அமைப்பது அத்தகைய ஒரு பணியாகும். இந்தச் செயலை எவ்வாறு திறம்படச் செய்வது என்பதைப் புரிந்துகொள்வது, உங்கள் குறியீட்டு செயல்முறையை நெறிப்படுத்தலாம் மற்றும் உங்கள் வலைத்தளத்தின் ஊடாடுதலை மேம்படுத்தலாம்.

இந்தக் கட்டுரையில், jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியின் "சரிபார்க்கப்பட்ட" சொத்தை அமைப்பதற்கான சரியான முறையை ஆராய்வோம். நாங்கள் எடுத்துக்காட்டுகளைப் பார்ப்போம், தொடரியல் விளக்குவோம், மேலும் உங்கள் சொந்த திட்டங்களில் செயல்படுத்த தெளிவான தீர்வை உங்களுக்கு வழங்குவோம்.

கட்டளை	விளக்கம்
.prop()	தேர்ந்தெடுக்கப்பட்ட உறுப்புகளின் பண்புகள் மற்றும் மதிப்புகளை அமைக்கிறது அல்லது திருப்பியளிக்கிறது. தேர்வுப்பெட்டியின் "சரிபார்க்கப்பட்ட" சொத்தை அமைக்க இங்கே பயன்படுத்தப்பட்டது.
$(document).ready()	DOM முழுமையாக ஏற்றப்பட்டவுடன் உள்ளே உள்ள குறியீடு இயக்கப்படுவதை உறுதி செய்கிறது.
express()	எக்ஸ்பிரஸ் பயன்பாட்டை உருவாக்குகிறது, இது எக்ஸ்பிரஸ் கட்டமைப்பின் ஒரு எடுத்துக்காட்டு.
app.set()	காட்சி இயந்திரம் போன்ற எக்ஸ்பிரஸ் பயன்பாட்டில் உள்ள அமைப்பின் மதிப்பை அமைக்கிறது.
res.render()	காட்சியை ரெண்டர் செய்து, ரெண்டர் செய்யப்பட்ட HTML சரத்தை கிளையண்டிற்கு அனுப்புகிறது.
app.listen()	குறிப்பிட்ட ஹோஸ்ட் மற்றும் போர்ட்டில் உள்ள இணைப்புகளை பிணைக்கிறது மற்றும் கேட்கிறது.

jQuery தேர்வுப்பெட்டி உதாரணத்தைப் புரிந்துகொள்வது

வழங்கப்பட்ட ஸ்கிரிப்டுகள் jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியின் "சரிபார்க்கப்பட்ட" சொத்தை எவ்வாறு அமைப்பது என்பதை விளக்குகிறது. முதல் எடுத்துக்காட்டில், HTML அமைப்பு ஒரு செக்பாக்ஸ் உள்ளீட்டை உள்ளடக்கியது. தி $(document).ready() DOM முழுமையாக ஏற்றப்பட்ட பின்னரே jQuery குறியீடு இயங்குவதை செயல்பாடு உறுதி செய்கிறது. இந்த செயல்பாட்டிற்குள், தி $(".myCheckBox").prop("checked", true); தேர்வுப்பெட்டியை தேர்வு செய்தபடி அமைக்க கட்டளை பயன்படுத்தப்படுகிறது. தி .prop() தனிமங்களின் பண்புகளை அமைப்பதற்கு அல்லது மீட்டெடுப்பதற்கு jQuery இல் முறை அவசியம், இது இந்த நோக்கத்திற்காக பயனுள்ளதாக இருக்கும்.

இரண்டாவது எடுத்துக்காட்டு, எக்ஸ்பிரஸ் மற்றும் EJS உடன் Node.js ஐப் பயன்படுத்தி பின்தளத்தில் ஸ்கிரிப்டிங்கை ஒருங்கிணைக்கிறது. தி express() செயல்பாடு எக்ஸ்பிரஸ் பயன்பாட்டை துவக்குகிறது app.set('view engine', 'ejs') EJS ஐ டெம்ப்ளேட் இயந்திரமாக கட்டமைக்கிறது. தி app.get() செயல்பாடு முகப்புப்பக்கத்திற்கான வழியை அமைத்து, "இண்டெக்ஸ்" காட்சியை வழங்குகிறது res.render('index'). EJS டெம்ப்ளேட்டில் அதே தேர்வுப்பெட்டி உள்ளீடு மற்றும் jQuery ஸ்கிரிப்ட் ஆகியவை அடங்கும், தேர்வுப்பெட்டியை சரிபார்த்தபடி அமைக்கவும், விரும்பிய செயல்பாட்டை அடைய முன்பக்கம் மற்றும் பின்தளம் எவ்வாறு இணைந்து செயல்பட முடியும் என்பதை நிரூபிக்கிறது.

jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியை தேர்வு செய்ததாக அமைத்தல்

jQuery ஐப் பயன்படுத்தி முன்பக்கம் ஸ்கிரிப்ட்

// HTML structure
<input type="checkbox" class="myCheckBox">Check me!
// jQuery script to check the checkbox
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $(".myCheckBox").prop("checked", true);
});
</script>

தேர்வுப்பெட்டி நிலையை கையாள jQuery ஐப் பயன்படுத்துதல்

எக்ஸ்பிரஸ் மற்றும் EJS உடன் Node.js இல் பேக்கண்ட் ஸ்கிரிப்ட்

// Install Express and EJS
// npm install express ejs
// server.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index');
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
// views/index.ejs
<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="checkbox" class="myCheckBox">Check me!</input>
  <script>
    $(document).ready(function() {
      $(".myCheckBox").prop("checked", true);
    });
  </script>
</body>
</html>

jQuery மூலம் பல தேர்வுப்பெட்டிகளை அமைத்தல்

jQuery ஐப் பயன்படுத்தி தேர்வு செய்யப்பட்ட ஒரு தேர்வுப்பெட்டியை அமைப்பதுடன், ஒரே நேரத்தில் பல தேர்வுப்பெட்டிகளையும் நீங்கள் கையாளலாம். பயன்படுத்துவதன் மூலம் $(":checkbox") தேர்வி, நீங்கள் DOM இல் உள்ள அனைத்து தேர்வுப்பெட்டிகளையும் தேர்ந்தெடுக்கலாம். மொத்தமாகத் தேர்ந்தெடுப்பது அல்லது ஒரே செயலின் மூலம் பல தேர்வுப்பெட்டிகளின் நிலையை மாற்றுவது போன்ற பணிகளுக்கு இது பயனுள்ளதாக இருக்கும். உதாரணமாக, பயன்படுத்தி $(".myCheckBox").each(function() { $(this).prop("checked", true); }) ஒவ்வொரு தேர்வுப்பெட்டியிலும் "myCheckBox" வகுப்பைக் கொண்டு, அவற்றைச் சரிபார்த்தவாறு அமைக்கும்.

மற்றொரு பயனுள்ள நுட்பம், பயனர் தொடர்புகளின் அடிப்படையில் தேர்வுப்பெட்டிகளின் நிலையை மாறும் வகையில் மாற்றுகிறது. போன்ற நிகழ்வு நடத்துபவர்களை பிணைப்பதன் மூலம் .click() அல்லது .change() தேர்வுப்பெட்டிகளுக்கு, தேர்வுப்பெட்டியின் நிலை மாறும்போது தனிப்பயன் செயல்பாடுகளை இயக்கலாம். உதாரணத்திற்கு, $("#toggleAll").click(function() { $(".myCheckBox").prop("checked", this.checked); }) "toggleAll" என்ற ஐடியைக் கொண்ட உறுப்பு சொடுக்கும் போது அனைத்து தேர்வுப்பெட்டிகளையும் மாற்றும். இது உங்கள் இணைய பயன்பாடுகளை மேலும் ஊடாடும் மற்றும் பயனர் நட்புடன் ஆக்குகிறது.

jQuery மூலம் செக்பாக்ஸ்களை அமைப்பது பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்

jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டி சரிபார்க்கப்பட்டதா என்பதை எவ்வாறு சரிபார்க்கலாம்?
நீங்கள் பயன்படுத்தலாம் $(".myCheckBox").is(":checked") தேர்வுப்பெட்டி தேர்வு செய்யப்பட்டுள்ளதா என்பதைச் சரிபார்க்க.
jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியைத் தேர்வுநீக்குவது எப்படி?
பயன்படுத்தவும் $(".myCheckBox").prop("checked", false) தேர்வுப்பெட்டியைத் தேர்வுநீக்க.
தேர்வுப்பெட்டியின் தேர்வு செய்யப்பட்ட நிலையை மாற்ற முடியுமா?
ஆம், பயன்படுத்தவும் $(".myCheckBox").prop("checked", !$(".myCheckBox").prop("checked")) சரிபார்க்கப்பட்ட நிலையை மாற்ற.
jQuery உடன் படிவ சமர்ப்பிப்பில் தேர்வுப்பெட்டிகளை எவ்வாறு கையாள்வது?
பயன்படுத்தவும் $(".myForm").submit(function(event) { /* handle checkboxes here */ }); படிவம் சமர்ப்பிக்கும் போது தேர்வுப்பெட்டிகளை நிர்வகிக்க.
பண்புக்கூறு மூலம் தேர்வுப்பெட்டிகளைத் தேர்ந்தெடுக்க முடியுமா?
ஆம், பயன்படுத்தவும் $("input[type='checkbox']") தேர்வுப்பெட்டிகளை அவற்றின் வகை பண்புக்கூறு மூலம் தேர்ந்தெடுக்க.
jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியை எவ்வாறு முடக்குவது?
பயன்படுத்தவும் $(".myCheckBox").prop("disabled", true) தேர்வுப்பெட்டியை முடக்க.
ஒரு நிகழ்வை தேர்வுப்பெட்டியின் நிலை மாற்றத்துடன் இணைக்க முடியுமா?
ஆம், பயன்படுத்தவும் $(".myCheckBox").change(function() { /* handle change */ }) ஒரு நிகழ்வை தேர்வுப்பெட்டியின் நிலை மாற்றத்துடன் இணைக்க.
ஒரு குறிப்பிட்ட கொள்கலனில் உள்ள அனைத்து தேர்வுப்பெட்டிகளையும் எவ்வாறு தேர்ந்தெடுப்பது?
பயன்படுத்தவும் $("#container :checkbox") ஒரு குறிப்பிட்ட கொள்கலன் உறுப்புக்குள் அனைத்து தேர்வுப்பெட்டிகளையும் தேர்ந்தெடுக்க.
தேர்வு செய்யப்பட்ட தேர்வுப்பெட்டிகளின் எண்ணிக்கையைக் கணக்கிட jQuery ஐப் பயன்படுத்தலாமா?
ஆம், பயன்படுத்தவும் $(".myCheckBox:checked").length சரிபார்க்கப்பட்ட தேர்வுப்பெட்டிகளின் எண்ணிக்கையை எண்ணுவதற்கு.
தேர்வுப்பெட்டியின் கிளிக் நிகழ்வில் ஒரு செயல்பாட்டை எவ்வாறு பிணைப்பது?
பயன்படுத்தவும் $(".myCheckBox").click(function() { /* function code */ }) தேர்வுப்பெட்டியின் கிளிக் நிகழ்வுடன் ஒரு செயல்பாட்டை பிணைக்க.

jQuery தேர்வுப்பெட்டி கையாளுதல் பற்றிய இறுதி எண்ணங்கள்

jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டிகளின் நிலையை நிர்வகிப்பது திறமையானது மற்றும் நேரடியானது. போன்ற கட்டளைகளைப் பயன்படுத்துவதன் மூலம் .prop() மற்றும் நிகழ்வு கையாளுபவர்கள், டெவலப்பர்கள் ஊடாடும் மற்றும் பயனர் நட்பு வலை பயன்பாடுகளை உருவாக்க முடியும். கூடுதலாக, Node.js மற்றும் Express போன்ற தொழில்நுட்பங்களுடன் பின்தளத்தில் ஸ்கிரிப்டிங்கை ஒருங்கிணைப்பது வலை வடிவங்களின் மாறும் திறன்களை மேம்படுத்துகிறது, இது நிகழ்நேர தொடர்புகளையும் மாநில நிர்வாகத்தையும் அனுமதிக்கிறது.

இந்த முறைகள் மற்றும் கட்டளைகளைப் புரிந்துகொள்வதன் மூலம், உங்கள் திட்டங்களில் உள்ள தேர்வுப்பெட்டிகளை நீங்கள் திறமையாக கையாளலாம், இது ஒரு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை உறுதி செய்கிறது. நவீன தரநிலைகளை பூர்த்தி செய்யும் செயல்பாட்டு மற்றும் மாறும் வலை பயன்பாடுகளை உருவாக்க இந்த அறிவு அவசியம்.

jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியை எப்படி அமைப்பது