चेक किए गए चेकबॉक्स का मूल्य प्राप्त करें?

Question

इसलिए मुझे ऐसा कोड मिला है जो इस तरह दिखता है:

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

वर्तमान में जो भी चेकबॉक्स है उसका मूल्य प्राप्त करने के लिए मुझे जावास्क्रिप्ट की आवश्यकता है।

संपादित करें : जोड़ने के लिए, केवल एक चेक बॉक्स होगा।

Comments

आपको जावास्क्रिप्ट कोड या jQuery की आवश्यकता है?

— एंड्री वोरोबयेव

रेडियो बटन का उपयोग क्यों नहीं करते?

— प्रवीणेंव जुले

क्योंकि मैं एक साइट के लिए एक प्लगइन लिख रहा हूं

— मैथ्यू 'अनिवार्य' ब्रायंट

यदि आपको केवल एक चेकबॉक्स की आवश्यकता है, तो आप रेडियो बटन का उपयोग क्यों नहीं करते हैं? यह इस कार्य के लिए अधिक उपयुक्त UI घटक है।

— ताल यारों

क्या आप एक रेडियो बटन का चयन रद्द कर सकते हैं? मुझे लगता है कि बिना js कोड के नहीं। हो सकता है कि ओपी आसानी से बॉक्स का चयन रद्द करना चाहते हों।

— R3tep

Answer 1

आधुनिक ब्राउज़रों के लिए :

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

का उपयोग करकेjQuery :

var checkedValue = $('.messageCheckbox:checked').val();

शुद्ध जावास्क्रिप्ट बिनाjQuery :

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}

Comments

@Mageek कई तत्वों पर एक ही आईडी जोड़ने के लिए यह बुरा अभ्यास है।

— इंजीनियर

@Engineer नहीं, बस प्रत्येक चेकबॉक्स के लिए एक अलग आईडी डाल रहा है।

— मेगेक जूल

@Engineer "सेविंग बाइट्स" क्योंकि हमें बस लिखना चाहिए document.getElementById("foo").value();और "सेविंग्स कैलकुलेशन" क्योंकि getElementByIdनिश्चित रूप से तेज getElementsByTagNameऔर लूप है।

— मागेक जूल

jQuery .is(":checked")के लिए सही तरीका है क्योंकि .val()विशेषता मान वापस आ जाएगा यदि परिभाषित किया गया है .. और यहां तक ​​कि अगर यह परिभाषित नहीं है तो यह "चालू" और बूलियन मान नहीं लौटेगा .. jsfiddle.net/d5f7wnzu

— पीटर

document.querySelector('.messageCheckbox:checked').valueयदि कोई चेकबॉक्स चेक नहीं किया जाता है, तो टाइप करेंटायर उत्पन्न करता है

— Meisner

Answer 2

उपरोक्त में से कोई भी मेरे लिए काम नहीं करता है, लेकिन बस इसका उपयोग करें:

document.querySelector('.messageCheckbox').checked;

खुश कोडिंग।

Comments

मैं सहमत हूँ। आपने जो सोचा था, उसकी पुष्टि की। मुझे var chk1 = document.getElementById ('messageCheckbox') डालना पसंद है; इस तरह मैं "chk1" वैरिएबल के गुणों को संदर्भित कर सकता हूं: चेक, सक्षम, स्टाइल, आदि

— JustJohn

आपको वह कहाँ मिला id? क्या आप समझा सकते हैं? जिस व्यक्ति ने classइनपुट में उपयोग किया गया प्रश्न पूछा है । अच्छा होगा यदि आप पूर्ण कोड प्रदान कर सकते हैं तो मैं समझ सकता हूं कि आपको कहां से मिला हैid

— devfaysal

यह ओपी द्वारा प्रदान किए गए उदाहरण कोड के साथ काम नहीं कर सकता है ... मैं उत्सुक हूं कि प्रश्न का उत्तर न देते हुए इसे बहुत सारे अपवित्र क्यों मिले, हालांकि एक त्वरित फिक्स इसे सही बना सकता है।

— लॉरेंट एस।

क्या आप यह प्रस्तावित करता है कि यह क्या करता है और यह ओपी को कैसे संबोधित करता है?

— Ro Yo Mi

@PradeepKumarPrabaharan शायद मेरे जैसे लोगों (कई मदों के लिए आईडी का उपयोग नहीं कर रहा है) सोच रहा था कि .value उन्हें अपरिभाषित क्यों दे रहा था।

Answer 3

मैं अपने कोड में इसका इस्तेमाल कर रहा हूं

var x=$("#checkbox").is(":checked");

अगर चेकबॉक्स चेक xकिया गया है तो सही होगा अन्यथा यह गलत होगा।

Comments

यह प्रश्न का उत्तर नहीं देता है, लेकिन यह निर्धारित करने के लिए उपयोग किया जा सकता है कि चेकबॉक्स की जांच की गई है या नहीं। +1 चूंकि इसने अभी भी मेरी मदद की है।

— केविन जुरकोव्स्की

प्रश्न का उत्तर नहीं देता है लेकिन वास्तव में वही है जिसकी मुझे तलाश थी।

— phn

जब #checkboxएक चर है, जैसे उपयोगी myCheckbox।

— ऑप्टिमाई

Answer 4

सादे जावास्क्रिप्ट में:

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}

function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}

Answer 5

$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
 	  });
       
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">

Answer 6

यह सीधे सवाल का जवाब नहीं देता है, लेकिन भविष्य के आगंतुकों की मदद कर सकता है।

---

यदि आप चाहते हैं कि एक चर हमेशा चेकबॉक्स की वर्तमान स्थिति हो (बजाय इसके राज्य को जाँचते रहने के लिए), तो आप onchangeउस चर को सेट करने के लिए घटना को संशोधित कर सकते हैं ।

यह HTML में किया जा सकता है:

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

या जावास्क्रिप्ट के साथ:

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})

Answer 7

इसे इस्तेमाल करो:

alert($(".messageCheckbox").is(":checked").val())

यह जांचता है कि चेकबॉक्स के पास वर्ग "messageCheckbox" है, अन्यथा आपको चेकबॉक्स प्रकार, इत्यादि होने पर चेक करना होगा।

Answer 8

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">

function getValue(value){
    alert(value);
}

Answer 9

यदि आप शब्दार्थ यूआई प्रतिक्रिया का उपयोग कर रहे हैं , dataतो इस onChangeघटना के दूसरे पैरामीटर के रूप में पारित किया जाता है ।

इसलिए आप checkedसंपत्ति का उपयोग इस प्रकार कर सकते हैं:

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />

Answer 10

उपर्युक्त में से किसी ने भी मेरे लिए काम नहीं किया, क्योंकि जब बॉक्स की जाँच नहीं की गई थी, तो मैंने कंसोल में त्रुटियों को फेंक दिया था, इसलिए मैंने इन पंक्तियों के साथ कुछ किया (ऑनक्लिक और चेकबॉक्स फ़ंक्शन केवल डेमो उद्देश्यों के लिए उपयोग किए जा रहे हैं, मेरे उपयोग के मामले में यह एक का हिस्सा है बहुत बड़ा रूप प्रस्तुत समारोह):

function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}

<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

Answer 11

मेरी परियोजना में, मैं आमतौर पर इस स्निपेट का उपयोग करता हूं:

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

और यह अच्छी तरह से काम करता है। नमस्कार।

Comments

ऐसा करने का एक बेहद अक्षम तरीका।

— 18