జావాస్క్రిప్ట్‌ని ఉపయోగించి చెక్‌బాక్స్‌ని చెక్ చేయడానికి మరియు అన్‌చెక్ చేసే విధానాన్ని ఈ రైట్-అప్ వివరిస్తుంది.
జావాస్క్రిప్ట్‌ని ఉపయోగించి చెక్‌బాక్స్‌ని చెక్ చేయడం/అన్‌చెక్ చేయడం ఎలా?
జావాస్క్రిప్ట్‌లోని చెక్‌బాక్స్‌లను చెక్ చేయడానికి లేదా అన్‌చెక్ చేయడానికి, “ని ఉపయోగించండి తనిఖీ చేశారు ' గుణం. ముందుగా, HTML మూలకం యొక్క సూచనను పొందండి ' చెక్బాక్స్ 'దానిని కేటాయించిన సహాయంతో' id 'ఉపయోగించి' getElementById() 'పద్ధతి, ఆపై, వర్తించు' తనిఖీ చేశారు దాని విలువపై ఆస్తి.
ఉదాహరణ 1: సింగిల్ చెక్‌బాక్స్‌ని చెక్/చెక్ అన్‌చెక్ చేయండి
ముందుగా, కింది కోడ్ లైన్లతో HTML ఫైల్‌ను సృష్టించండి:
< h3 > చెక్‌బాక్స్‌ని చెక్ చేయడానికి లేదా అన్‌చెక్ చేయడానికి బటన్లను క్లిక్ చేయండి h3 >
< ఇన్పుట్ రకం = 'చెక్ బాక్స్' id = 'చెక్ బాక్స్' > నిబంధనలు మరియు షరతులతో అంగీకరిస్తున్నారు < br >< br >
< బటన్ రకం = 'బటన్' క్లిక్ చేయండి = 'తనిఖీ()' > అవును బటన్ >
< బటన్ రకం = 'బటన్' క్లిక్ చేయండి = 'చెక్ చేయవద్దు()' > లేదు బటన్ >
పై కోడ్‌లో:
- ఐడితో చెక్‌బాక్స్‌ను సృష్టించండి” చెక్బాక్స్ 'అది మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది' చెక్బాక్స్ ”చర్యలను నిర్వహించడానికి.
- రెండు బటన్లను సృష్టించండి, ' అవును 'మరియు' లేదు ”, ఫంక్షన్‌ని ట్రిగ్గర్ చేసే చెక్‌బాక్స్‌ని చెక్ చేయడానికి లేదా అన్‌చెక్ చేయడానికి “ తనిఖీ() 'మరియు' ఎంపికను తీసివేయి() ”వరుసగా క్లిక్ ఈవెంట్‌లో.
పై కోడ్‌ని అమలు చేసిన తర్వాత, అవుట్‌పుట్ ఇలా ఉంటుంది:
తర్వాత, JavaScript ఫైల్ లేదా ట్యాగ్‌లోని చెక్‌బాక్స్‌లో చర్యలను నిర్వహించడానికి ఫంక్షన్‌లను నిర్వచించండి. చెక్‌బాక్స్‌ని చెక్ చేయడానికి, క్రింది కోడ్ లైన్‌లను ఉపయోగించండి:
ఫంక్షన్ తనిఖీ ( ) {
ఇన్పుట్ చేయనివ్వండి = పత్రం. getElementById ( 'చెక్బాక్స్' ) ;
ఇన్పుట్. తనిఖీ చేశారు = నిజం ;
}
పై కోడ్‌లో:
- ఒక ఫంక్షన్ నిర్వచించండి ' తనిఖీ() ”అది చెక్‌బాక్స్‌ని చెక్ చేయడానికి బటన్ క్లిక్‌ని ట్రిగ్గర్ చేస్తుంది.
- ఫంక్షన్ యొక్క బాడీ లోపల, దాని ఐడిని ఉపయోగించి చెక్బాక్స్ యొక్క సూచనను పొందండి “ చెక్బాక్స్ '' సహాయంతో getElementById() 'పద్ధతి మరియు దానిని వేరియబుల్‌లో నిల్వ చేయండి' ఇన్పుట్ ”.
- 'ని సెట్ చేయడం ద్వారా చెక్‌బాక్స్‌ను తనిఖీ చేయండి తనిఖీ చేశారు 'ఆస్తి' నిజం ”.
'ని క్లిక్ చేయడం ద్వారా చెక్బాక్స్ ఎంపికను తీసివేయడానికి లేదు ” బటన్, క్రింద ఇచ్చిన కోడ్‌ని ఉపయోగించండి:
ఫంక్షన్ తనిఖీ చేయవద్దు ( ) {ఇన్పుట్ చేయనివ్వండి = పత్రం. getElementById ( 'చెక్బాక్స్' ) ;
ఇన్పుట్. తనిఖీ చేశారు = తప్పుడు ;
}
పై కోడ్ స్నిప్పెట్:
- ఒక ఫంక్షన్ నిర్వచించండి ' ఎంపికను తీసివేయి() ” ఇది చెక్బాక్స్ ఎంపికను తీసివేయడానికి బటన్ క్లిక్‌ని ప్రేరేపిస్తుంది.
- ఫంక్షన్ యొక్క బాడీ లోపల, దాని ఐడిని ఉపయోగించి చెక్బాక్స్ యొక్క సూచనను పొందండి “ చెక్బాక్స్ '' సహాయంతో getElementById() 'పద్ధతి మరియు దానిని వేరియబుల్‌లో నిల్వ చేయండి' ఇన్పుట్ ”.
- 'ని సెట్ చేయడం ద్వారా చెక్బాక్స్ ఎంపికను తీసివేయండి తనిఖీ చేశారు 'ఆస్తి' తప్పుడు ”.
చివరగా, 'ని ఉపయోగించి పేజీ లోడ్‌లో డిఫాల్ట్‌గా చెక్బాక్స్ ఎంపికను తీసివేయడానికి ఒక ఫంక్షన్‌ను నిర్వచించండి window.onload ”సంఘటన:
కిటికీ. ఆన్‌లోడ్ = ఫంక్షన్ ( ) {కిటికీ. addEventListener ( 'లోడ్' , తనిఖీ , తప్పుడు ) ;
}
అవుట్‌పుట్
బటన్‌లపై క్లిక్ చేస్తున్నప్పుడు చెక్బాక్స్ విజయవంతంగా ఎంపిక చేయబడిందని మరియు అన్‌చెక్ చేయబడిందని అవుట్‌పుట్ సూచిస్తుంది.
ఉదాహరణ 2: బహుళ చెక్‌బాక్స్‌లను చెక్/అన్‌చెక్ చేయండి
ఒకే సమయంలో అన్ని చెక్‌బాక్స్‌లను ఎలా చెక్ చేయాలి లేదా అన్‌చెక్ చేయాలి అనేదానికి ఉదాహరణ చూద్దాం.
ముందుగా, ఒక HTML ఫైల్‌ను సృష్టించండి, ఆపై బహుళ చెక్‌బాక్స్‌లను మరియు ఐడితో బటన్‌ను సృష్టించండి. టోగుల్ ” ఇది చెక్‌బాక్స్‌ని చెక్ చేయడానికి లేదా అన్‌చెక్ చేయడానికి టోగుల్ చేస్తుంది:
< h3 > అన్ని చెక్‌బాక్స్‌లను చెక్ చేయడానికి లేదా అన్‌చెక్ చేయడానికి బటన్‌ను క్లిక్ చేయండి h3 >< ఇన్పుట్ రకం = 'చెక్ బాక్స్' తరగతి = 'చెక్ బాక్స్' > నన్ను తనిఖీ చేయండి లేదా ఎంపికను తీసివేయండి < br >
< ఇన్పుట్ రకం = 'చెక్ బాక్స్' తరగతి = 'చెక్ బాక్స్' > నన్ను తనిఖీ చేయండి లేదా ఎంపికను తీసివేయండి < br >
< ఇన్పుట్ రకం = 'చెక్ బాక్స్' తరగతి = 'చెక్ బాక్స్' > నన్ను తనిఖీ చేయండి లేదా ఎంపికను తీసివేయండి < br >
< ఇన్పుట్ రకం = 'చెక్ బాక్స్' తరగతి = 'చెక్ బాక్స్' > నన్ను తనిఖీ చేయండి లేదా ఎంపికను తీసివేయండి < br >
< ఇన్పుట్ రకం = 'చెక్ బాక్స్' తరగతి = 'చెక్ బాక్స్' > నన్ను తనిఖీ చేయండి లేదా ఎంపికను తీసివేయండి < br >< br >
< ఇన్పుట్ రకం = 'బటన్' id = 'టోగుల్' విలువ = 'చెక్‌బాక్స్‌లను టోగుల్ చేయడానికి క్లిక్ చేయండి' >
సంబంధిత అవుట్‌పుట్ ఇలా ఉంటుంది:
ఆ తర్వాత, JavaScript ఫైల్ లేదా