JQuery में चेकबॉक्स मान प्राप्त करें
html forms (10)
मैं jQuery में चेकबॉक्स का मूल्य कैसे प्राप्त कर सकता हूं?
$ ('वर्ग [मूल्य = 3]')। प्रोप ('चेक', सत्य);
इस $ ('इनपुट [नाम ^ = चेकबॉक्स इनपुट]' का उपयोग करें)। वैल ();
इस तथ्य के बावजूद कि यह प्रश्न एक jQuery समाधान के लिए पूछ रहा है, यहां एक शुद्ध जावास्क्रिप्ट उत्तर है क्योंकि किसी ने इसका उल्लेख नहीं किया है।
JQuery के बिना:
बस तत्व का चयन करें और checked
की checked
संपत्ति तक पहुंचें (जो एक बूलियन लौटाता है)।
var checkbox = document.querySelector('input[type="checkbox"]');
alert(checkbox.checked);
<input type="checkbox"/>
change
घटना को सुनकर एक त्वरित उदाहरण यहां दिया गया है:
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
alert(this.checked);
});
<input type="checkbox"/>
चेक किए गए तत्वों का चयन करने के लिए, :checked
छद्म वर्ग ( input[type="checkbox"]:checked
)।
यहां एक उदाहरण दिया गया है जो चेक किए गए input
तत्वों पर पुनरावृत्त करता है और चेक किए गए तत्व के नामों का एक मैप किया गया सरणी देता है।
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
return el.name;
});
console.log(checkedElements);
<div class="parent">
<input type="checkbox" name="name1" />
<input type="checkbox" name="name2" />
<input type="checkbox" name="name3" checked="checked" />
<input type="checkbox" name="name4" checked="checked" />
<input type="checkbox" name="name5" />
</div>
चेकबॉक्स के मूल्य को पुनः प्राप्त करने का एकमात्र सही तरीका निम्नानुसार है
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
जैसा कि jQuery की वेबसाइट में आधिकारिक दस्तावेज में बताया गया है। शेष विधियों के पास चेकबॉक्स की संपत्ति से कोई लेना-देना नहीं है, वे विशेषता की जांच कर रहे हैं जिसका अर्थ है कि वे लोड होने पर चेकबॉक्स की प्रारंभिक स्थिति का परीक्षण कर रहे हैं। तो संक्षेप में:
- जब आपके पास तत्व हो और आप जानते हैं कि यह एक चेकबॉक्स है, तो आप इसकी संपत्ति को आसानी से पढ़ सकते हैं और आपको इसके लिए jQuery की आवश्यकता नहीं होगी (यानी
elem.checked
) या आप$(elem).prop("checked")
उपयोग कर सकते हैं यदि आप jQuery पर भरोसा करना चाहते हैं। - यदि आपको पहली बार लोड किया गया था (यानी डिफ़ॉल्ट मान) मान को
$(elem).is(":checked")
(या तुलना करने) की आवश्यकता है तो इसे करने का सही तरीका$(elem).is(":checked")
।
उत्तर भ्रामक हैं, कृपया नीचे स्वयं की जांच करें:
मूल्य विशेषता का मान प्राप्त करने के लिए आप ऐसा कुछ कर सकते हैं:
$("input[type='checkbox']").val();
या यदि आपने इसके लिए class
या id
सेट की है, तो आप यह कर सकते हैं:
$('#check_id').val();
$('.check_class').val();
हालांकि यह वही मान वापस करेगा चाहे वह चेक किया गया हो या नहीं, यह भ्रमित हो सकता है क्योंकि यह सबमिट किए गए फॉर्म व्यवहार से भिन्न है।
यह जांचने के लिए कि क्या यह चेक किया गया है या नहीं, ऐसा करें:
if ($('#check_id').is(":checked"))
{
// it is checked
}
यहां सभी चेक किए गए चेकबॉक्स का मान सरणी के रूप में प्राप्त करने का तरीका बताया गया है:
var values = (function() {
var a = [];
$(".checkboxes:checked").each(function() {
a.push(this.value);
});
return a;
})()
सरल लेकिन प्रभावी और आपको लगता है कि चेकबॉक्स मिलेगा:
$("#some_id")[0].checked;
true
/ false
देता true
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
//By each()
var testval = [];
$('.hobbies_class:checked').each(function() {
testval.push($(this).val());
});
//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");
//HTML Code
<input type="checkbox" value="cricket" name="hobbies[]" class="hobbies_class">Cricket
<input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey
उदाहरण
Demo
jQuery(".checkboxClass").click(function(){
var selectedCountry = new Array();
var n = jQuery(".checkboxClass:checked").length;
if (n > 0){
jQuery(".checkboxClass:checked").each(function(){
selectedCountry.push($(this).val());
});
}
alert(selectedCountry);
});