চেক করা চেকবক্সের মান পাবেন?


177

সুতরাং আমি এমন কোড পেয়েছি যা দেখতে এরকম দেখাচ্ছে:

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

আমার বর্তমানে জাভাস্ক্রিপ্টের প্রয়োজন যা বর্তমানে চেক করা আছে যা যা চেকবক্সের মান পেতে।

সম্পাদনা : যোগ করতে, কেবলমাত্র একটিতে পরীক্ষিত বাক্স থাকবে।


1
আপনার জাভাস্ক্রিপ্ট কোড বা jQuery দরকার?
আন্দ্রে ভোরোবিয়েভ

6
কেন রেডিও বোতাম ব্যবহার করবেন না?
প্রবীণভেনু

কারণ আমি কোনও সাইটের জন্য একটি প্লাগইন লিখছি
ম্যাথু 'বাধ্যতামূলক' ব্রায়ান্ট

আপনার যদি কেবল একটি চেকবক্স প্রয়োজন হয় তবে আপনি কেন রেডিও বোতাম ব্যবহার করবেন না? এটি এই কাজের জন্য আরও উপযুক্ত UI উপাদান।
তাল ইয়ারন

@ ট্যালায়ারন আপনি কি রেডিও বোতামটি নির্বাচন করতে পারবেন? আমি মনে করি জেএস কোড ছাড়া না। হয়তো ওপি সহজেই বাক্সটি অনির্বাচিত করতে চায়।
R3tep

উত্তর:


256

আধুনিক ব্রাউজারগুলির জন্য :

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;
      }
}

9
@ ম্যাজেক একাধিক উপাদানগুলিতে একই আইডি যুক্ত করা খারাপ অভ্যাস।
ইঞ্জিনিয়ার

@ ইঞ্জিনিয়ার না, প্রতিটি চেকবক্সের জন্য আলাদা আইডি রেখে দিন।
ম্যাজেক

3
@ ইঞ্জিনিয়ার "সেভিং বাইটস" কারণ আমাদের অবশ্যই লিখতে হবে document.getElementById("foo").value();এবং "সংরক্ষণের গণনাগুলি" কারণ getElementByIdনিশ্চয়ই তার চেয়ে দ্রুততর getElementsByTagNameএবং একটি লুপ রয়েছে।
ম্যাজেক

9
jQuery এর .is(":checked")জন্য সঠিক উপায়টি এটির সংজ্ঞাযুক্ত.val() হলে অ্যাট্রিবিউট মানটি ফেরত দেবে .. এবং এটির সংজ্ঞা না থাকলেও এটি "চালু" হবে এবং কোনও বুলিয়ান মান নয় .. jsfiddle.net/d5f7wnzu
পিটার

1
document.querySelector('.messageCheckbox:checked').valueযদি কোনও চেকবাক্স চেক না করা হয় তবে টাইপরর তৈরি করে
মিজনার

262

উপরের কোনওটিই আমার পক্ষে কাজ করেনি তবে কেবল এটি ব্যবহার করুন:

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

শুভ কোডিং।


আমি সম্মতি জ্ঞাপন করি. আমি যা ভেবেছি তা আপনি নিশ্চিত করেছেন। আমি var chk1 = document.getElementById ('messageCheckbox') রাখতে চাই; চেক করা থাকে, সক্ষম করা থাকে, শৈলী, ইত্যাদি এই ভাবে আমি উল্লেখ করতে পারেন "chk1" পরিবর্তনশীল এর বৈশিষ্ট্য
JustJohn

4
তুমি কোথায় পেল id? আপনি দয়া করে ব্যাখ্যা করতে পারেন? যে ছেলেটি প্রশ্নটি জিজ্ঞাসা করেছিল classআসলে ইনপুটটিতে ব্যবহৃত হয়েছিল। আপনি যদি পুরো কোডটি সরবরাহ করতে পারেন তবে ভাল হবে যাতে আপনি কোথায় পেয়েছেন তা বুঝতে পারিid
ডেভফেসাল

3
এটি ওপি দ্বারা সরবরাহিত উদাহরণ কোডটি দিয়ে কাজ করতে পারে না ... আমি আগ্রহী কারণ প্রশ্নের উত্তর না দেওয়ার সময় কেন এটি এতগুলি উত্সাহ পেয়েছে, যদিও দ্রুত সমাধান এটি সঠিক করতে পারে।
লরেন্ট এস।

1
এটি কী করে এবং এটি ওপিকে কীভাবে সম্বোধন করে তার প্রসারিত করার জন্য আপনি কি আপনার প্রস্তাবিত উত্তরটি সম্পাদনা করতে পারেন?
Ro Yo Mi 21

2
@ প্রদীপ কুমারপ্রহরণ সম্ভবত আমার মতো লোকেরা (একাধিক আইটেমের জন্য আইডি ব্যবহার করছেন না) ভেবে ভাবছেন কেন। মূল্য তাদেরকে অপরিশোধিত করে দিচ্ছে।

111

আমি এটি আমার কোডটিতে ব্যবহার করছি this এটি ব্যবহার করে দেখুন

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

যদি চেকবাক্সটি চেক করা হয় xতবে এটি সত্য হবে অন্যথায় এটি মিথ্যা হবে।


7
এটি প্রশ্নের উত্তর দেয় না, তবে চেকবক্সটি চেক করা হয়েছে কিনা তা নির্ধারণ করতে ব্যবহার করা যেতে পারে। +1 যেহেতু এটি এখনও আমাকে সাহায্য করেছিল।
কেভিন জুরকোভস্কি

5
প্রশ্নের উত্তর দেয় না তবে ঠিক আমি যা খুঁজছিলাম।
পিএইচএন

যখন #checkboxপরিবর্তনশীল হয় দরকারী , উদাহরণস্বরূপ myCheckbox
অপ্টিমি

15

সরল জাভাস্ক্রিপ্টে:

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);
    }
}

4

$(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">


4

এটি সরাসরি প্রশ্নের উত্তর দেয় না, তবে ভবিষ্যতের দর্শকদের সহায়তা করতে পারে।


আপনি যদি কোনও ভেরিয়েবল সর্বদা চেকবক্সের বর্তমান অবস্থা হতে চান (তার স্থিতি পরীক্ষা করে রাখার চেয়ে), আপনি 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})

2

এটা ব্যবহার কর:

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

এটি "ম্যাসেজচেকবাক্স" শ্রেণি আছে কিনা তা পরীক্ষা করতে চেকবক্সগুলি অনুমান করে, অন্যথায় আপনাকে ইনপুটটি চেকবক্সের ধরণ ইত্যাদি কিনা তা পরীক্ষা করে দেখতে হবে etc.


2
<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);
}

0

আপনি ব্যবহার করেন, তাহলে শব্দার্থিক UI 'তে প্রতিক্রিয়া , dataদ্বিতীয় প্যারামিটার হিসাবে পাস করা হয়েছে onChangeইভেন্ট।

আপনি নীচে checkedহিসাবে সম্পত্তি অ্যাক্সেস করতে পারেন :

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

0

উপরের কোনওটি আমার পক্ষে কাজ করে না যখন কনসোলটিতে ত্রুটি না ফেলে বাক্সটি পরীক্ষা করা হয়নি তাই আমি পরিবর্তে এই লাইনগুলি বরাবর কিছু করেছি (অনক্লিক এবং চেকবক্স ফাংশনটি কেবলমাত্র ডেমো উদ্দেশ্যে ব্যবহার করা হচ্ছে, আমার ব্যবহারের ক্ষেত্রে এটি একটি অংশের অংশ আরও অনেক বড় ফর্ম জমা ফাংশন):

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>


-3

আমার প্রকল্পে, আমি সাধারণত এই স্নিপেটগুলি ব্যবহার করি:

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

এবং এটি ভাল কাজ করে। শুভেচ্ছান্তে.


এটি করার একটি অত্যন্ত অদক্ষ উপায়।
এশোফার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.