কীভাবে jQuery- এ চেকবাক্সের মানগুলি পুনরুদ্ধার করবেন


240

চেক করা চেকবাক্সের মানগুলি পেতে jQuery কীভাবে ব্যবহার করবেন এবং তাৎক্ষণিকভাবে এটি কোনও টেক্সারিয়ায় রাখবেন?

এই কোডের মতো:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

যদি অ্যাজাক্সid="c_d" দ্বারা আপডেট করা হয় তবে নীচে ওএলসিগনিটোর কোডটি কাজ করে না। কোন ভাল সমাধান আছে?


আপনি কি একসাথে সমস্ত বা একটি চেয়েছিলেন?
টিএসটিম্পার

প্রদত্ত মান / লেবেল সহ আমরা বাক্সটি কীভাবে 'চেক' করতে পারি? "এক_নাম 2"?
অমিতড

5
@ স্বীকৃত ব্যবহার $ ("ইনপুট [নাম = এক_নাম 2]") att
মার্ক সুলথেইস

ধন্যবাদ যে সুন্দরভাবে কাজ করেছে..ও রেডিও টাইপের জন্য। 1 টি ভোট আপ :)
অমিত্ত

উত্তর:


320

এখানে কাজ করে এমন একটি ( উদাহরণ দেখুন ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

হালনাগাদ

কয়েক মাস পরে আইডি পরিবর্তিত হলে উপরের কাজ কীভাবে রাখা যায় সে সম্পর্কে আরও একটি প্রশ্ন জিজ্ঞাসা করা হয়েছিল। ওয়েল, সমাধানটি সিএসএস ক্লাস ব্যবহার করে এমন জেনেরিক কিছুতে আপডেট টেক্সটরিয়া ফাংশনটি ম্যাপিংয়ের জন্য, এবং সেই পরিবর্তনের জন্য ডমকে নিরীক্ষণের জন্য লাইভ ফাংশনটি ব্যবহার করার জন্য সমাধানটি ফোটায়।


2
আহ হা! চমৎকার। আপনি উভয় সম্ভাব্য পরিস্থিতি বিবেচনায় নিয়েছেন। ভালো কাজ স্যার। ;)
কাইলফারিস

প্রদত্ত মান / লেবেল সহ আমরা বাক্সটি কীভাবে 'চেক' করতে পারি? "এক_নাম 2"?
অমিতড

6
আমি এই জাতীয় সামগ্রীর জন্য মানচিত্রটি ব্যবহার করতে চাই: $ (': চেক করা', '# সি_বি') map মানচিত্র (ফাংশন (i, cb) {রিটার্ন সিবি.ভালিউ}) .get ()। এছাড়াও, এটি কেবল ব্যক্তিগত পছন্দ, তবে আমি মানগুলি পাঠ্যের ক্ষেত্রগুলি পরিবর্তন করা থেকে আলাদা করব, যেমন: $ (ফাংশন () {$ ('# সি_বি ইনপুট') click ক্লিক করুন ((('# টি')) ভাল ($ (': চেক করা', '# সি_বি') map মানচিত্র (ফাংশন (i, cb) {রিটার্ন সিবি.ভ্যালু}) .get ())) $ ('# সি_বি ইনপুট: প্রথম') trigger ট্রিগারহ্যান্ডলার (' ক্লিক'); });
ব্র্যান্ডন

এর $(document).on("click", "#c_b input", updateTextArea);পরিবর্তে আজাক্স সমস্যা পেতে ব্যবহার করুন।
গোল্ডেনোয়া 11

1
নিশ্চিত না যে এটি কেবল আইই (11) এ রয়েছে, তবে এটি $('#c_b:checked')(স্পেসিংয়ের উপর জোর দেওয়া ) হওয়া উচিত নয় ?
এসমার্ক 16

124

আপনি কমা বিচ্ছিন্ন স্ট্রিংয়ে সমস্ত নির্বাচিত চেকবাক্সের মানও ফেরত দিতে পারেন। আপনি এসকিউএল হিসাবে প্যারামিটার হিসাবে প্রেরণ করলে এটি আপনার পক্ষে আরও সহজ করে দেবে

এখানে এমন একটি নমুনা যা কমা পৃথক স্ট্রিংয়ে "চেকবক্সনাম" নাম রয়েছে এমন সমস্ত নির্বাচিত চেকবাক্স মানগুলিকে ফিরিয়ে দেয়

এবং এখানে জাভাস্ক্রিপ্ট

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

এইচটিএমএল নমুনা এখানে

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>

প্রদত্ত নামের সাথে থাকা চেকবাক্সগুলির সমস্ত মান পাওয়ার একটি উপায় সন্ধান করার সময় আমি কেবল এই হোঁচট খেয়েছি এবং এটি দুটি ছোট সমস্যা নিয়ে আমার পক্ষে কাজ করে। 1) প্রতিবার আমি যখন প্রথমটি ব্যতীত অন্য কোনও বাক্স চেক করি তখন এটি প্রথমটিতে চেকমার্কটিকে টগল করে। 2) যখন আমি এটিকে একটি অ্যারেতে সেট করার চেষ্টা করি যাতে আমি পরে তথ্যটি অ্যাক্সেস করতে পারি, এটি ক্র্যাশ হয়ে যায়।
শ্রদ্ধেয় বুদবুদ

3
এটি সত্যই সেরা উত্তর। খুব সহজ. কিছু লোককে বিভ্রান্ত করার সাথে সাথে আমি "ফাংশন" এবং "সতর্কতা" সরিয়ে ফেলব, তবে কোডটি সহজ, খুব ভাল।
tmarois

শো-সিলেক্টভ্যালিউস রেডিও বোতামগুলিরও একই নাম রয়েছে এমন গ্রুপগুলির ডিকোডিংয়ের জন্য কাজ করে
ম্যাথু লক

65

আপনার প্রশ্নটি বেশ অস্পষ্ট তবে আমি মনে করি এটি আপনার প্রয়োজন:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

সম্পাদনা: ওহ, ঠিক আছে .. আপনি সেখানে যান ... আপনার আগে এইচটিএমএল ছিল না। যাইহোক, হ্যাঁ, আমি ভেবেছিলাম আপনি ক্লিক করার সাথে সাথে মানটিকে কোনও টেক্সারিয়ার মধ্যে রেখেছিলেন। আপনি যদি পৃষ্ঠার লোডটিতে পরীক্ষিত চেকবাক্সগুলির মানগুলি টেক্সটরিয়ায় (সম্ভবত একটি দুর্দান্ত কমা-বিচ্ছেদ সহ) রাখতে চান তবে এটি তত সহজ হবে:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

2 সম্পাদনা করুন লোকেদের যেমন করা হয়েছে, আপনি লিখেছেন দীর্ঘতর নির্বাচককে শর্টকাট করতেও আপনি এটি করতে পারেন:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... আমি পুরোপুরি ভুলে গিয়েছিলাম সেই শর্টকাটটির কথা। ;)


50

এটি আমার পক্ষে নিখুঁতভাবে কাজ করে:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

ধন্যবাদ মোহাম্মদ এলশেখ


1
শীতল মানুষ ... এই তিনিই আমার
এজাক্স

7
। এছাড়াও $ পারেন ( 'ইনপুট [NAME = নির্বাচন]: পরীক্ষিত') মানচিত্র (ফাংশন () {this.value আসতে;}) toArray ()।
ygaradon

8

ধন্যবাদ AltCognito, আপনার সমাধান সাহায্য করেছে। আমরা চেকবক্সগুলির নাম ব্যবহার করে এটিও করতে পারি:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});

6

নিম্নলিখিতটি কার্যকর হতে পারে যেহেতু আমি এখানে কিছুটা ভিন্ন সমাধান খুঁজছি। আমার স্ক্রিপ্টটি ইনপুট উপাদানগুলির মাধ্যমে স্বয়ংক্রিয়ভাবে লুপ করার প্রয়োজন ছিল এবং তাদের মানগুলি (jQuery.post () ফাংশনটির জন্য) ফিরিয়ে দিতে হবে, চেকবক্সগুলি চেক বাক্সের অবস্থা নির্বিশেষে তাদের মানগুলি ফেরত দেওয়ার ক্ষেত্রে সমস্যা ছিল। এটি আমার সমাধান ছিল:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

ব্যবহার:

jQuery(".element").input_val();

প্রদত্ত ইনপুট ক্ষেত্রটি যদি একটি চেকবাক্স হয় তবে ইনপুট_ভাল ফাংশনটি যদি চেক করা থাকে তবে কেবল একটি মান দেয়। অন্যান্য সমস্ত উপাদানগুলির জন্য, পরীক্ষিত স্থিতি নির্বিশেষে মানটি ফেরত দেওয়া হয়।


এটি সত্যিই দুর্দান্তভাবে কাজ করে, অনেক অনেক ধন্যবাদ ... আমি কেবল "রিটার্ন জিকুয়েরি (এটি) .ভাল ();" "সত্য প্রত্যাবর্তন;" কারণ এটি আমার ক্ষেত্রে একটি চেকবাক্স যা আমার চেক করা হয়েছে কিনা তা আমার জানা দরকার .. ধন্যবাদ!
টিসিবি 13

5

আপনার যদি ভেরিয়েবলের মানটি সংরক্ষণ করতে হয় তবে এখানে একটি বিকল্প রয়েছে:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(মানচিত্র () একটি অ্যারে প্রদান করে, যা আমি টেক্সারিয়ায় পাঠ্যের চেয়ে হাতের মুঠোয় দেখতে পাই)।


3
   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1
আপনি এটি অতিরিক্ত জটিল করে ফেলেছেন। এছাড়াও, আপনি সাধারণত মান প্যারামিটার সহ কোনও পাঠ্যমূল্যের মান সেট করেন না - পাঠ্যবাক্সের মান এটি অভ্যন্তরীণ এইচটিএমএল। এবং যদি আপনি কিছু উপাদানের মান সেট করতে চান তবে ব্রাউজার বিমূর্তকরণের উদ্দেশ্যে 'ভাল ()' পদ্ধতিটি ব্যবহার করা সাধারণত সেরা।
কাইলফারিস

3
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });


2

যাইহোক, আপনার সম্ভবত এর মতো কিছু দরকার:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

এটি পৃষ্ঠায় প্রথম চেক করা চেকবক্সের মান পাবে এবং এটি টেক্সারিয়ায় প্রবেশ করিয়ে দেবে id='textarea'

নোট করুন যে আপনার উদাহরণ কোডে আপনার চেকবক্সগুলি একটি ফর্মের মধ্যে রাখা উচিত।


2
এটি ভুল, isএকটি বুলিয়ান মান প্রদান করে, একটি বুলিয়ান মানের কোনও valপদ্ধতি নেই।
undefined

2

একটি সহজ এবং শর্টেড উপায় যা আমি এটি সম্পাদন করতে ব্যবহার করছি, অন্য পোস্টের উত্তর ব্যবহার করে তা হ'ল:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

মূলত শহরগুলি একটি মাইএসকিউএল ডাটাবেস থেকে পুনরুদ্ধার করা হয় এবং লুপের সময় পিএইচপিতে লুপ হয়:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

এখন, উপরের jQuery কোডটি ব্যবহার করে, আমি সমস্ত সিটি_আইডি মান পাই এবং $ .get (...) ব্যবহার করে ডাটাবেসে ফিরে জমা দেব ...

কোডটি পুরোপুরি গতিশীল হওয়ায় এটি আমার জীবনকে এত সহজ করে তুলেছে। আরও শহর যুক্ত করার জন্য, আমাকে যা করতে হবে তা হ'ল আমার ডাটাবেসে আরও বেশি শহর যুক্ত করা, এবং পিএইচপি বা jQuery শেষের দিকে কোনও উদ্বেগ নেই।


0

আমারও একই রকম সমস্যা হয়েছে এবং আমি উপরের উদাহরণগুলি ব্যবহার করে এটি সমাধান করেছি:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });

0

আর একবার চেষ্টা কর..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .push($(this).val());
});
console.log(listCheck);

0

যদি আপনি যাচাই করা হচ্ছে ততক্ষণে কোনও চেকবক্সের মান inোকাতে চান তবে এটি আপনার পক্ষে কাজ করা উচিত:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})

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