চেকবক্সগুলি চালু / বন্ধ টগল করুন

Question

আমার নিম্নলিখিতগুলি রয়েছে:

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

আমি id="select-all-teammembers"চেক এবং চেক করা না থাকাতে টগল করার জন্য ক্লিক করা চাই । ধারনা? যে কোড কয়েক লাইন না?

Answer 1

তুমি লিখতে পারো:

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

JQuery 1.6 এর আগে, যখন আমাদের কেবল অ্যাটর ছিল () এবং প্রপ () ছিল না, তখন আমরা লিখতাম :

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

তবে "বুলিয়ান" এইচটিএমএল বৈশিষ্ট্য প্রয়োগ করার আগে এর prop()চেয়ে ভাল শব্দার্থবিজ্ঞান রয়েছে attr(), সুতরাং এটি সাধারণত এই পরিস্থিতিতে পছন্দ করা হয়।

Comments

এটি প্রথমটির স্ট্যাটাসটি বেস করার সাথে সাথে এটি জটিল হয়ে উঠতে পারে (সুতরাং যদি ব্যবহারকারী প্রথমটি পরীক্ষা করে, তবে টগল ব্যবহার করে, তারা সিঙ্ক থেকে বেরিয়ে আসবে)। কিছুটা সামান্য টুইট করা হয়েছে সুতরাং এটি তালিকার প্রথম চেকবক্স নয়, টগলটির স্থিতিটি বন্ধ করে দিয়েছে: $ ("ইনপুট [নাম = প্রাপক \ [\]]")। প্রপ ("পরীক্ষিত", $ (এটি) চেক করা "));

— কুকিজফোরডেভো

'প্রোপ' ব্যবহার করা জেপ্টো-তেও এই কাজ করে। অন্যথায় এটি বাক্সটি চেক করবে, তবে এটিটি চেক করবে না।

— সিম্পলজি

"অ্যাটার" এর পরিবর্তে "প্রপ" কৌশলটি করেছেন: "অ্যাটর্ন" দিয়ে এটি কিছু সময়ের জন্য টগল হয় এবং তারপরে "প্রপ" পরিবর্তে এটি প্রত্যাশার সাথে টগল হয়। আপডেটের জন্য +1।

— টেকনিকুইস্ট

$('input[type=checkbox]').trigger('click');নীচে @ 2astalavista দ্বারা উল্লিখিত আরও সুসংহত এবং "পরিবর্তন" ইভেন্টটিকে ট্রিগার করে।

— এখানে

আপনি কি উত্তরগুলি @ কুকিজফরফেরদেওয়ের উত্তর সমর্থন করতে সম্পাদনা করতে পারবেন

— 8:36

Answer 2

//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Comments

ক্রোম 29 এ কাজ করে তবে এফএফ 17.0.7 এ নয়, কেউ কি তা নিশ্চিত করতে পারেন?

— গ্রিডো

আমি এত দিন সম্পত্তি পরিবর্তন করার পথে যাচ্ছিলাম। আমার জন্য এটি চেকবক্সের উপাদানগুলি যাচাই বাছাই করার জন্য একটি দুর্দান্ত এবং আরও নমনীয় পদ্ধতি।

— ইসিওমা ননডাম

অযাচিত ইভেন্টটি ট্রিগার করা হয়েছে।

— ইয়াহং আহন

চেকবাক্সগুলির জন্য, সাধারণত 'পরিবর্তন' ইভেন্টটিকে বরখাস্ত করার পরামর্শ দেওয়া হয়, কারণ লেবেলে ক্লিক করে এগুলি পরিবর্তন করা যেতে পারে।

— পিটার লেঞ্জো

Answer 3

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

তার জন্য, সমস্ত চেকবক্সগুলিতে প্রতিটি চেকবক্সের স্থিতি টগল করার পরিবর্তে সমস্ত চেকবক্সগুলির একই অবস্থা হওয়ার কারণে এগুলির সমাধানগুলির কোনওটিই কাজ করে না। এরকম $(':checkbox').prop('checked')অনেক চেকবাক্সগুলিতে যৌক্তিক ফেরৎ ও এতদুভয়ের মধ্যবর্তী .checkedবাইনারি সম্পত্তি, অর্থাত যদি তাদের মধ্যে একজন অবারিত হয়, ফিরে মান false।

আপনি .each()যদি প্রতিটি চেকবক্সের স্থিতি সকলের সমান করার পরিবর্তে টগল করতে চান তবে আপনাকে ব্যবহার করা দরকার , যেমন

   $(':checkbox').each(function () { this.checked = !this.checked; });

নোট করুন যে সমস্ত ব্রাউজারে সম্পত্তি বিদ্যমান $(this)থাকায় হ্যান্ডলারের ভিতরে আপনার দরকার .checkedনেই।

Comments

হ্যাঁ, সমস্ত চেকবাক্সগুলির স্থিতিতে টগল করার জন্য এটি সঠিক উত্তর!

— সিডওয়েল

আপনার যখন প্রচুর চেকবক্স থাকে তখন jQuery এর সাথে ক্লিক ট্রিগার করার চেয়ে দ্রুতগতির অর্ডার।

— জেরেমি কুক

Answer 4

এখানে আপনি চান যে অন্য উপায়।

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

Comments

তা টগলিং নয়।

— এজেন্টফায়ার

@ কেএসটি - এটি একটি আরও ভাল পদ্ধতি $ ('ইনপুট [নাম = প্রাপক \ [\]]')। টগল করুন (this.checked); ক্লাস ভুলে যাও

— ডেভিস

Answer 5

আমি মনে করি কেবল একটি ক্লিক ট্রিগার করা সহজ:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

Answer 6

সবচেয়ে ভাল উপায় আমি ভাবতে পারি।

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

অথবা

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

অথবা

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

Answer 7

JQuery 1.6 যেহেতু আপনি .prop(function)প্রতিটি পাওয়া উপাদানের চেক করা অবস্থা টগল করতে ব্যবহার করতে পারেন :

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

Comments

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

— ব্যবহারকারী 1477388

সম্পাদনা: দৃশ্যত, এটা মূলত একটি উপায় নাল পাস হয় stackoverflow.com/questions/11406823/...

— user1477388

Answer 8

এই প্লাগইনটি ব্যবহার করুন:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }

   }

তারপর

$('#myCheckBox').toggleCheck();

Answer 9

ধরে নিচ্ছি যে এটি এমন একটি চিত্র যা চেকবক্সটি টগল করতে হবে, এটি আমার জন্য কাজ করে

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

Comments

এটি যেহেতু এটি আপনার প্রথম উত্তর, তাই বুঝতে হবে যে প্রশ্নটিতে ব্যবহৃত পোস্টারটি প্যাটার্নটি অনুসরণ করা সবচেয়ে ভাল - যেমন ডকুমেন্ট প্রস্তুত হ্যান্ডলারের জন্য jQuery কোড স্থাপন করা এবং মার্কআপে লাইন-ইন না। যদি আপনার এটি না করার কোনও কারণ থাকে তবে কেন তা ব্যাখ্যা করুন।

— মার্ক সুল্তেহিস

Answer 10

চেক-সমস্ত চেকবাক্স নির্দিষ্ট শর্তে নিজে আপডেট করা উচিত । '# সিলেক্ট-অল-টিম মেম্বার' এ ক্লিক করার চেষ্টা করুন এবং তারপরে কয়েকটি আইটেম আনটিক করুন এবং আবার সিলেক্ট-এ ক্লিক করুন। আপনি অসঙ্গতি দেখতে পারেন। এটি রোধ করতে নিম্নলিখিত কৌশলটি ব্যবহার করুন:

  var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

বিটিডাব্লু সমস্ত চেকবক্স ডিওএম-অবজেক্ট উপরে বর্ণিত হিসাবে ক্যাশে করা উচিত।

Answer 11

এইচটিএমএল 5 এবং লেবেলগুলির সাথে চেকবক্সটি নির্বাচন না করে চেকবক্সগুলি টগল করার জন্য এখানে jQuery উপায়:

 <div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>

  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

http://www.bootply.com/A4h6kAPshx

Answer 12

যদি আপনি প্রতিটি বাক্সকে পৃথকভাবে টগল করতে চান (বা কেবলমাত্র একটি বাক্স পাশাপাশি কাজ করে):

আমি .each () ব্যবহার করার পরামর্শ দিচ্ছি, কারণ আপনি যদি বিভিন্ন জিনিস ঘটতে চান তবে এটি সংশোধন করা সহজ, এবং এখনও অপেক্ষাকৃত সংক্ষিপ্ত এবং পড়তে সহজ।

যেমন:

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });

// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });

// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
    if(this.checked != x){ this.checked = x; $(this).change();}  
});

পার্শ্ব নোটে ... নিশ্চিত না কেন সবাই .attr () বা .prop () থেকে (আন) পরীক্ষা করে।

আমি যতদূর জানি, এলিমেন্ট.কম সব ব্রাউজারে সর্বদা একই কাজ করে?

Answer 13

jQuery("#checker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = true;
    });
});
jQuery("#dechecker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = false;
    });
});
jQuery("#checktoggler").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = !this.checked;
    });
});

;)

Answer 14

আপনি এই মত লিখতে পারেন

$(function() {
    $("#checkbox-toggle").click(function() {
        $('input[type=checkbox][name=checkbox_id\\[\\]]').click();
    });
});

'# চেকবক্স-টগল' আইডি সহ ব্যবহারকারী বোতামে ক্লিক করলে কেবল চেক বাক্সের ইভেন্ট ক্লিক করতে হবে।

Answer 15

একটি ভাল পদ্ধতির এবং ইউএক্স

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);

    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});

$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

Answer 16

<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

চেষ্টা করুন:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});

Answer 17

এটি আমার জন্য খুব ভাল কাজ করে।

   $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

Comments

আপনি কি বুঝতে পেরেছেন যে আপনি "চেকড" সম্পত্তিটি ইতিমধ্যে ঠিক একই মূল্য দিচ্ছেন, তাই না? এটা কি কিছুটা বিব্রতকর নয়? আপনি অবশ্যই এর !আগে একটি চিহ্ন রাখতে চেয়েছিলেন ..

— vsync

Answer 18

সর্বাধিক প্রাথমিক উদাহরণটি হ'ল:

// get DOM elements
var checkbox = document.querySelector('input'),
    button = document.querySelector('button');

// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);

// when clicking the button, toggle the checkbox
function toggleCheckbox(){
  checkbox.checked = !checkbox.checked;
};

<input type="checkbox">
<button>Toggle checkbox</button>

Answer 19

কেবল আপনি এটি ব্যবহার করতে পারেন

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});

Answer 20

আমার অনুমান অনুসারে, সবচেয়ে হালকা লোক যিনি সাধারণ বৈকল্পিকের পরামর্শ দিয়েছেন তিনি হলেন জিগোলনেট গিগোল্যাশভিলি, তবে আমি আরও সুন্দর রূপটি বলতে চাই। এটি পরীক্ষা করে দেখুন

$(document).on('click', '.fieldWrapper > label', function(event) {
    event.preventDefault()
    var n = $( event.target ).parent().find('input:checked').length
    var m = $( event.target ).parent().find('input').length
    x = n==m? false:true
    $( event.target ).parent().find('input').each(function (ind, el) {
        // $(el).attr('checked', 'checked');
        this.checked = x
    })
})

Answer 21

যথাযথ বা মিথ্যা পরিবর্তে 'পরীক্ষিত' বা নাল সেট করা কাজটি করবে।

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');

Answer 22

ওয়েব টেমপ্লেটগুলিতে ব্যবহৃত কোনও টগল স্যুইচ অ্যানিমেটার ক্লিক করার পরে এই কোডটি চেক বাক্সটি টগল করবে। আপনার কোডে উপলভ্য হিসাবে ".অনফসুইচ-লেবেল" প্রতিস্থাপন করুন। "চেকবাক্সআইডিআইডি" এখানে টগলড চেকবক্স।

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});

Answer 23

ওয়েল একটি সহজ উপায় আছে

প্রথমে আপনার চেকবক্সগুলিকে শ্রেণীর উদাহরণ দিন 'id_chk'

তারপরে চেকবক্সের ভিতরে যা 'id_chk' চেকবাক্সগুলির স্থিতি নিয়ন্ত্রণ করবে:

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

সমস্ত, আশা করি এটি সাহায্য করবে