à®ªà®¯à®©à¯à®ªà®à¯à®¤à¯à®¤ .change() jQuery à®à®²à¯ à®¨à®¿à®à®´à¯à®µà¯ à®à¯à®¯à®¾à®³à¯à®ªà®µà®°à¯: $('#checkboxId').change(function() { ... }).

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

Mia Chevalier

வெள்ளி, 7 ஜூன், 2024 ’அன்று’ பிற்பகல் 8:59:17

jQuery இல் தேர்வுப்பெட்டி நிலைகளைப் புரிந்துகொள்வது

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

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

கட்டளை	விளக்கம்
$(document).ready()	HTML ஆவணம் முழுமையாக ஏற்றப்படும் போது குறிப்பிட்ட குறியீட்டை இயக்கும் jQuery செயல்பாடு.
$('#isAgeSelected').change()	தேர்வுப்பெட்டியின் நிலை மாறும்போது ஒரு செயலைத் தூண்டும் jQuery நிகழ்வு ஹேண்ட்லர்.
$(this).is(':checked')	தற்போதைய தேர்வுப்பெட்டி சரிபார்க்கப்பட்டதா என்பதைச் சரிபார்க்க jQuery முறை.
document.addEventListener('DOMContentLoaded')	HTML ஆவணம் முழுமையாக ஏற்றப்பட்டு பாகுபடுத்தப்பட்ட பிறகு குறிப்பிட்ட குறியீட்டை இயக்கும் வெண்ணிலா ஜாவாஸ்கிரிப்ட் நிகழ்வு.
checkbox.checked	ஒரு வெண்ணிலா ஜாவாஸ்கிரிப்ட் சொத்து, தேர்வுப்பெட்டியைத் தேர்வுசெய்தால் சரி என்று திரும்பும், இல்லையெனில் தவறு.
useState()	செயல்பாட்டுக் கூறுகளுக்கு நிலையைச் சேர்க்க உங்களை அனுமதிக்கும் ரியாக்ட் ஹூக்.
onChange()	தேர்வுப்பெட்டியின் நிலை மாறும்போது செயலைத் தூண்டும் எதிர்வினை நிகழ்வு கையாளுதல்.

தேர்வுப்பெட்டி நிலையை திறம்பட கையாளுதல்

முதல் ஸ்கிரிப்ட் பயன்படுத்துகிறது jQuery தேர்வுப்பெட்டி நிலையை கையாள. இது தொடங்குகிறது $(document).ready() ஸ்கிரிப்டை இயக்கும் முன் DOM முழுமையாக ஏற்றப்பட்டிருப்பதை உறுதிசெய்ய. தி $('#isAgeSelected').change() செயல்பாடு ஒரு நிகழ்வு கையாளுதலை இணைக்கிறது, இது தேர்வுப்பெட்டியின் நிலை மாறும்போதெல்லாம் தூண்டுகிறது. இந்த செயல்பாட்டின் உள்ளே, $(this).is(':checked') தேர்வுப்பெட்டி சரிபார்க்கப்பட்டதா என்பதைச் சரிபார்க்கப் பயன்படுகிறது. அது இருந்தால், உரைப்பெட்டி பயன்படுத்தி காட்டப்படும் $('#txtAge').show(); இல்லையெனில், அது மறைக்கப்பட்டுள்ளது $('#txtAge').hide(). இந்த முறை jQuery இல் தேர்வுப்பெட்டி நிலைகளைக் கையாள்வதில் திறமையானது, பயனர் செயல்களுக்கு பக்கம் மாறும் வகையில் பதிலளிக்கிறது.

இரண்டாவது ஸ்கிரிப்ட் வெண்ணிலா ஜாவாஸ்கிரிப்ட்டில் எழுதப்பட்டுள்ளது. இது தொடங்குகிறது document.addEventListener('DOMContentLoaded') HTML ஆவணம் முழுமையாக ஏற்றப்பட்ட பிறகு ஸ்கிரிப்ட் இயங்குவதை உறுதிசெய்ய. ஸ்கிரிப்ட் தேர்வுப்பெட்டி மற்றும் உரைப்பெட்டி உறுப்புகளைப் பயன்படுத்தி மீட்டெடுக்கிறது document.getElementById(). இது மாற்றங்களைக் கேட்கும் தேர்வுப்பெட்டியில் நிகழ்வு கேட்பவரைச் சேர்க்கிறது. தி checkbox.checked தேர்வுப்பெட்டியின் நிலையைச் சரிபார்க்க சொத்து பயன்படுத்தப்படுகிறது. தேர்வுப்பெட்டி தேர்வு செய்யப்பட்டால், உரைப்பெட்டி அமைப்பதன் மூலம் காட்டப்படும் textBox.style.display 'தடுக்க'; இல்லையெனில், காட்சியை 'இல்லை' என அமைப்பதன் மூலம் அது மறைக்கப்படும். இந்த அணுகுமுறை வெளிப்புற நூலகங்களை நம்பாமல் தேர்வுப்பெட்டி நிலைகளை எவ்வாறு நிர்வகிப்பது என்பதை நிரூபிக்கிறது.

jQuery மூலம் செக்பாக்ஸ் நிலையை சரிபார்க்கிறது

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is selected</div>
<script>
$(document).ready(function() {
  $('#isAgeSelected').change(function() {
    if ($(this).is(':checked')) {
      $('#txtAge').show();
    } else {
      $('#txtAge').hide();
    }
  });
});
</script>

வெண்ணிலா ஜாவாஸ்கிரிப்ட் மூலம் தேர்வுப்பெட்டி நிலையைச் சரிபார்க்கிறது

செக்பாக்ஸ் கையாளுதலுக்கு வெண்ணிலா ஜாவாஸ்கிரிப்டைப் பயன்படுத்துதல்

<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is selected</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var checkbox = document.getElementById('isAgeSelected');
  var textBox = document.getElementById('txtAge');
  checkbox.addEventListener('change', function() {
    if (checkbox.checked) {
      textBox.style.display = 'block';
    } else {
      textBox.style.display = 'none';
    }
  });
});
</script>

செக்பாக்ஸ் ஸ்டேட் ஹேண்ட்லிங் இன் ரியாக்ட்

ரியாக்ட் டு கண்ட்ரோல் செக்பாக்ஸ் ஸ்டேட்டைப் பயன்படுத்துதல்

import React, { useState } from 'react';
function App() {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <input type="checkbox" id="isAgeSelected" onChange={handleCheckboxChange} />
      <div id="txtAge" style={{ display: isChecked ? 'block' : 'none' }}>
        Age is selected
      </div>
    </div>
  );
}
export default App;

jQuery இல் மேம்பட்ட தேர்வுப்பெட்டி கையாளுதல்

jQuery இல் தேர்வுப்பெட்டிகளைக் கையாள்வதில் மற்றொரு முக்கியமான அம்சம், பக்க ஏற்றத்தில் அவற்றின் ஆரம்ப நிலையை நிர்வகிப்பது. HTML இல் ஒரு தேர்வுப்பெட்டி முன்கூட்டியே சரிபார்க்கப்பட்டால், ஸ்கிரிப்ட் இந்த நிலையைச் சரியாகக் கையாளும். நீங்கள் பயன்படுத்தலாம் $(document).ready() தேர்வுப்பெட்டியின் ஆரம்ப நிலையைச் சரிபார்த்து அதற்கேற்ப தொடர்புடைய உறுப்புகளின் தெரிவுநிலையை அமைக்கவும். பயனர் அனுபவத்தை மேம்படுத்தும் வகையில், ஆரம்பத்திலிருந்தே படிவ உறுப்புகளின் சரியான நிலையை UI பிரதிபலிப்பதை இது உறுதி செய்கிறது.

கூடுதலாக, ஒரு படிவத்தில் பல தேர்வுப்பெட்டிகளைக் கையாள்வது, தேர்வுப்பெட்டிகளின் குழுக்களைக் குறிவைக்கும் தேர்வாளர்களைப் பயன்படுத்தி jQuery மூலம் நெறிப்படுத்தப்படும். உதாரணமாக, பயன்படுத்தி $('input[type="checkbox"]').each(), நீங்கள் அனைத்து தேர்வுப்பெட்டிகள் மூலம் மீண்டும் மீண்டும் செய்யலாம் மற்றும் அவற்றின் தனிப்பட்ட நிலைகளின் அடிப்படையில் தேவையான தர்க்கத்தைப் பயன்படுத்தலாம். இந்த அணுகுமுறை சிக்கலான வடிவங்களில் பல நிபந்தனை புலங்களுடன் மிகவும் பயனுள்ளதாக இருக்கும், இது குறியீட்டை மிகவும் திறமையாகவும் பராமரிக்கவும் எளிதாக்குகிறது.

jQuery உடன் தேர்வுப்பெட்டிகளைக் கையாள்வது பற்றிய பொதுவான கேள்விகள்

jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டி சரிபார்க்கப்பட்டதா என்பதை எவ்வாறு சரிபார்க்கலாம்?
நீங்கள் பயன்படுத்தலாம் $('#checkboxId').is(':checked') தேர்வுப்பெட்டி தேர்வு செய்யப்பட்டுள்ளதா என்பதைச் சரிபார்க்க.
தேர்வுப்பெட்டியின் நிலை மாறும்போது நிகழ்வை எவ்வாறு தூண்டுவது?
பயன்படுத்த .change() jQuery இல் நிகழ்வு கையாளுபவர்: $('#checkboxId').change(function() { ... }).
jQuery இல் தேர்வு செய்யப்பட்ட தேர்வுப்பெட்டியின் மதிப்பை எவ்வாறு பெறுவது?
பயன்படுத்தவும் $('#checkboxId').val() தேர்வு செய்யப்பட்ட தேர்வுப்பெட்டியின் மதிப்பைப் பெற.
ஒரு நிகழ்வு ஹேண்ட்லர் மூலம் பல தேர்வுப்பெட்டிகளைக் கையாள முடியுமா?
ஆம், நீங்கள் பயன்படுத்தலாம் $('input[type="checkbox"]').change(function() { ... }) பல தேர்வுப்பெட்டிகளைக் கையாள.
jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியை எவ்வாறு தேர்வு செய்ய வேண்டும் அல்லது தேர்வு செய்யாமல் இருக்க வேண்டும்?
பயன்படுத்தவும் $('#checkboxId').prop('checked', true) தேர்வுப்பெட்டியை சரிபார்க்க, மற்றும் $('#checkboxId').prop('checked', false) அதை தேர்வுநீக்க.
பக்கத்தை ஏற்றும்போது தேர்வுப்பெட்டியின் ஆரம்ப நிலையை எவ்வாறு சரிபார்க்கலாம்?
உள்ளே உள்ள நிலையைச் சரிபார்க்கவும் $(document).ready() அதற்கேற்ப தொடர்புடைய உறுப்புகளின் தெரிவுநிலையை அமைக்கவும்.
என்ன வித்தியாசம் .attr() மற்றும் .prop() jQuery இல்?
.attr() பண்புக்கூறு மதிப்பை ஒரு சரமாகப் பெறுகிறது .prop() 'சரிபார்க்கப்பட்ட' போன்ற சொத்துகளுக்கான சொத்து மதிப்பை பூலியனாகப் பெறுகிறது.
jQuery ஐப் பயன்படுத்தி தேர்வுப்பெட்டியை எவ்வாறு முடக்குவது?
பயன்படுத்தவும் $('#checkboxId').prop('disabled', true) தேர்வுப்பெட்டியை முடக்க.

திறமையான தேர்வுப்பெட்டி மாநில மேலாண்மை

வலை மேம்பாட்டில் தேர்வுப்பெட்டி நிலைகளை நிர்வகிப்பதற்கான ஒரு முக்கியமான அம்சம் செக்பாக்ஸ் நிலையின் அடிப்படையில் தொடர்புடைய உறுப்புகளின் சரியான காட்சியை உறுதி செய்வதாகும். jQuery ஐப் பயன்படுத்துதல் .is(':checked') டெவலப்பர்கள் தேர்வுப்பெட்டி தேர்ந்தெடுக்கப்பட்டதா என்பதைச் சரிபார்த்து, அதற்கேற்ப உறுப்புகளைக் காட்ட அல்லது மறைக்க இந்த முறை அனுமதிக்கிறது. நிபந்தனை புலங்களுடன் எளிய வடிவங்களைக் கையாளும் போது இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும்.

மேலும், மிகவும் சிக்கலான பயன்பாடுகளில், பல தேர்வுப்பெட்டிகளை நிர்வகிப்பது இன்றியமையாததாகிறது. போன்ற jQuery தேர்விகளைப் பயன்படுத்துவதன் மூலம் $('input[type="checkbox"]'), டெவலப்பர்கள் ஒரு படிவம் மற்றும் ap இல் உள்ள அனைத்து தேர்வுப்பெட்டிகளிலும் திறமையாக மீண்டும் செயல்பட முடியும்

jQuery ஐப் பயன்படுத்தி செக்பாக்ஸ் நிலையை எவ்வாறு சரிபார்க்கலாம்