এইচটিএমএলে "সমস্ত নির্বাচন করুন" চেক বক্সটি কীভাবে বাস্তবায়ন করবেন?

Question

আমার একাধিক চেকবাক্স সহ একটি HTML পৃষ্ঠা রয়েছে।

"সমস্ত নির্বাচন করুন" নামে আমার আরও একটি চেকবক্স দরকার। আমি যখন এই চেকবক্সটি নির্বাচন করি তখন HTML পৃষ্ঠার সমস্ত চেকবক্স নির্বাচন করতে হবে। কিভাবে আমি এটি করতে পারব?

Comments

আপনি যদি কৃপণভাবে অবনতি করতে চান, "সমস্ত নির্বাচন করুন" বাছাই করার অর্থ আসলে এই হওয়া উচিত যে তাদের পৃথক রাষ্ট্র নির্বিশেষে সমস্তই নির্বাচিত হয়েছে। (জাভাস্ক্রিপ্ট অক্ষম করে আপনার পৃষ্ঠাতে পরিদর্শন করা)

— কিছু

ফায়ারফক্সে (এবং অন্যরা হতে পারে?): CTRL+SHIFT+Kকনসোলটি খুলতে হিট করুন , তারপরে পেস্ট করুন : $("input:checkbox").attr('checked', true)এবং হিট করুন Enter। বর্তমান পৃষ্ঠার সমস্ত চেক-বাক্সগুলি এখনই চেক করা উচিত। পরিবর্তনটি আন-চেকTrue করতে False।

— ashleedawg

Answer 1

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

হালনাগাদ:

for each...inকনস্ট্রাক্ট কাজ বলে মনে হচ্ছে না এই ক্ষেত্রে অন্তত সাফারি 5 বা Chrome 5. এই কোড সব ব্রাউজারে কাজ করা উচিত:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Comments

প্রত্যেকের জন্য (চেকবক্সে var চেকবক্স) --------------------------------------- করা উচিত: জন্য for (চেকবক্সগুলিতে চেকবক্স)

— হ্যালো ওয়ার্ল্ড

@ হেলো ওয়ার্ল্ড: প্রত্যেকের জন্য ... আসলে বৈধ জাভাস্ক্রিপ্ট: বিকাশকারী.মোজিলা.আর.ইন / কোর_জাভা স্ক্রিপ্ট_1.5_সূত্র / But তবে, যেমন কর্নেল জানিয়েছেন, এটি একটি অস্পষ্ট নির্মাণ। এছাড়াও, এই কোডটি সাফারি 5 বা ক্রোম 5 তে কাজ করে না It এটি এফএফ 3.6 এবং আইআইআরসি-তে কাজ করে, এটি সাফারি ৪ এ for(var i in checkboxes) checkboxes[i].checked = source.checkedকাজ করেছিল all সমস্ত ব্রাউজারে কাজ করে।

— বার্ক গেডার

for inকোনও সংগ্রহ বা অ্যারে দিয়ে কখনও ব্যবহার করবেন না

— এমপি্লুঞ্জন

কেন আপনি ন্যায়বিচারের , n=checkboxes.length;i<nপরিবর্তে না i < checkboxes.length? যাইহোক, ফাংশনটি জেনেরিক (কোডের পুনঃব্যবহার) করতে, একটি অতিরিক্ত প্যারামিটারটি পাস করুন: (source, checkboxes_name)এবং document.getElementsByName(checkboxes_name);নামটি হার্ড-কোডিং করা এবং ফাংশনটিকে একটি নির্দিষ্ট সেট চেকবক্সগুলির নির্দিষ্ট করে তোলার চেয়ে ভাল।

— এডিটিসি

ঠিক আছে, যেহেতু আমার সম্পাদনাটি কোনও কারণে প্রত্যাখ্যান করা হয়েছিল, আমার ধারণা আমি এখানে মন্তব্য করব। প্রতিটি নির্মাণের জন্য অবচয় করা হয়েছে এবং কাজ করবে না! আপনি তার প্রতিস্থাপন ব্যবহার করতে হবে: for(let checkbox of checkboxes)।

— forresthopkinsa

Answer 2

JQuery ব্যবহার :

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

এইচটিএমএল:

<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

Comments

আমি অনির্বাচিত ব্যবহারের কেসটি হ্যান্ডেল করার জন্য অন্য একটি ধারা যুক্ত করব, ;-) .. অন্য {// প্রতিটি চেকবক্স; (": চেকবক্স")। }

— পান্নাজভা

আপনি যদি এবং অন্যটি ছেড়ে যেতে চান এবং এখনও অনির্বাচিতদের পরিচালনা করতে চান তবে আপনি এটি এইভাবে করতে পারেন: var state = this.checked; $ (': চেকবক্স')। প্রতিটি (ফাংশন () {this.checked = state;});

— অসিল

Answer 3

আমি নিশ্চিত না যে কেউ এইভাবে উত্তর দেয়নি ( jQuery ব্যবহার করে ):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

এটি পরিষ্কার, এর কোনও লুপ নেই বা যদি / অন্য ধারা রয়েছে এবং এটি একটি কবজ হিসাবে কাজ করে।

Comments

মাত্র তিনটি লাইন, সহজ => সহজেই বোঝা যায় এবং অযথাই নির্বাচিত করার জন্যও কাজ করে। ধন্যবাদ.

— তিজে

Answer 4

এটিকে নির্বাচন থেকে মুক্ত করতে:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});

Comments

যদি অন্য কোনও প্রয়োজন হয় না ... কেবল this.checkedপরিবর্তে ব্যবহার করুন

— এম 13

Answer 5

আমি অবাক হয়েছি কারও উল্লেখ নেই document.querySelectorAll()। খাঁটি জাভাস্ক্রিপ্ট সমাধান, আই 9 + এ কাজ করে।

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}

<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

Comments

এটি ক্রোমে কাজ করেছে, তবে আমার বিভিন্ন কারণে প্রচুর চেকবক্স রয়েছে, সুতরাং 'টাইপ = "চেকবক্স" "টার্গেট না করে আমি' নাম =" মাইবজেক্ট "'টার্গেট করেছিলাম এবং এটিও কাজ করে।

— ধনী 701

হয়তো এটিকে নতুন সঠিক উত্তরে পরিবর্তন করা উচিত, যদি না হয় তবে কিছু আলোচনা সহায়ক হবে। :-)

— জেসি স্টিল

এই উত্তরটি অন্যান্য উত্তরের চেয়ে বিদ্যমান পৃষ্ঠাগুলিতে প্রয়োগ করা অনেক সহজ ছিল। ভাল করেছ.

— হিজড়া

Answer 6

ডেমো http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>

Comments

আমার জন্য এটি কেবল একটি একক চক্রের জন্য কাজ করছে t এটি একবার একবার টগল করে তবে কিছুই হয় না।

— mrudult

সুতরাং এটি attr()আমার অনুমান পদ্ধতি। এটিকে পরিবর্তন করা হয়েছেprop()

— mrudult

ঠিক আছে, যদি আমি তালিকা থেকে কোনও আইটেমটি অনির্বাচিত করে নির্বাচন করা সমস্ত চেকবক্সটিও নির্বাচিত না করা উচিত?

— কিছু_ অন্য_গুই

Answer 7

সামান্য পরিবর্তিত সংস্করণ যা সম্মানজনকভাবে পরীক্ষা করে এবং চেক করে না

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

Answer 8

আপনি যখন কল করবেন তখন আপনি document.getElementsByName("name")একটি পাবেন Object। এ এর .item(index)সমস্ত আইটেম অতিক্রম করতে ব্যবহার করুনObject

এইচটিএমএল:

<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​includes/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​misc/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​modules/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​profiles/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​scripts/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​sites/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​stats/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​themes/​">​

Answer 9

<html>

<head>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />

<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>

</html>

Answer 10

আমার সহজ সমাধানটি প্রতিটি চেকবক্সের বিভিন্ন নাম ব্যবহার করার সময়, ফর্মের প্রদত্ত অংশে সমস্ত চেকবক্সগুলি নির্বাচন / নির্বাচন বাছাই করার অনুমতি দেয় যাতে ফর্মটি পোস্ট করার পরে সেগুলি সহজেই সনাক্ত করা যায়।

javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

এইচটিএমএল উদাহরণ:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
    <p><input type="checkbox" name="colin" />Firth, Colin</p>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>

আশা করি তুমি পছন্দ করেছ!

Answer 11

এই সহজ JQuery চেষ্টা করুন:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});

Comments

আপনি এটি সরল করতে পারেন $(':checkbox').prop('checked', this.checked), শর্তসাপেক্ষের প্রয়োজন নেই।

— সুমিত

Answer 12

জাভাস্ক্রিপ্ট আপনার সেরা বাজি। নীচের লিঙ্কটি সমস্ত ডি / সিলেক্ট করতে বোতাম ব্যবহার করে একটি উদাহরণ দেয়। আপনি এটি একটি চেক বাক্স ব্যবহার করতে খাপ খাইয়ে নিতে চেষ্টা করতে পারেন, কেবলমাত্র 'সমস্ত' চেক বাক্স 'অনক্লিক বৈশিষ্ট্যটি ব্যবহার করুন use

সমস্ত চেকবাক্স চেক বা আনচেক করার জন্য জাভাস্ক্রিপ্ট ফাংশন

এই পৃষ্ঠাটির একটি সহজ উদাহরণ রয়েছে

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

Answer 13

এই নমুনাটি দেশীয় জাভাস্ক্রিপ্টের সাথে কাজ করে যেখানে চেকবক্সের ভেরিয়েবলের নাম পরিবর্তিত হয়, অর্থাত্ সমস্ত "ফু" নয়।

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
    {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
  checkboxes = getcheckboxes();
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>


<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

</body>
</html>

Comments

আপনার getcheckboxesফাংশনটি প্রতিস্থাপন করা যেতে পারেdocument.querySelectorAll('input[type=checkbox]');

— কাইডো

Answer 14

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type="text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>

Answer 15

কাজটি করা উচিত:

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

Answer 16

$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });

Answer 17

JQuery এবং নকআউট ব্যবহার:

এই বাধ্যতামূলক প্রধান চেকবক্সটি অন্তর্নিহিত চেকবক্সগুলির সাথে সিঙ্কে থাকে, সমস্ত চেকবক্সগুলি পরীক্ষা না করা হলে এটি চেক করা হবে।

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

এইচটিএমএলে:

<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

Comments

নকআউট সম্পর্কে আমি পর্যাপ্ত পরিমাণে জানি না (আমি সিডএনজেএসসি। লাউডফ্লেয়ার.কম থেকে ko3.4 ব্যবহার করছি তবে উপরেরটি মোটেই কাজ করছে না বলে মনে হচ্ছে Iআমি প্রাথমিক দেরিতে একটি ব্রেকপয়েন্ট সেট করতে পারি: কলটি পৃষ্ঠাটি লোড হওয়ার সাথে সাথে ট্রিগার হয়) (যা আমি অনুমান সঠিক হয়), কিন্তু এই উৎপাদনের কিছুই মধ্যে পদবিন্যাস - ফাংশন বাকি কেউই কার্যকর অন্যান্য ফাংশন উপর ব্রেকপয়েন্ট সেট, এবং তারা আলোড়ন সৃষ্টি না

— 66 টনি সাফোক

টনি সাফলক, সেখানে দুটি ইভেন্ট হ্যান্ডলার সেট রয়েছে: চেকবাক্সের জন্য অনক্লিক এবং অনচেঞ্জ এবং কোডের শেষে চেকবক্স মান আপডেট করা হয়। যদি এই কোডটি আপনার প্রকল্পে কাজ না করে, চেকবক্সের জন্য ডেটা-বাইন্ড বৈশিষ্ট্যটি পরীক্ষা করে দেখুন।

— ব্লেজকোভিচজ

Answer 18

একই ফর্মটিতে আপনার বিভিন্ন সেট চেকবক্স থাকতে পারে । এখানে এমন একটি সমাধান রয়েছে যা ভ্যানিলা জাভাস্ক্রিপ্ট ফাংশন ডকুমেন্ট ব্যবহার করে ক্লাস নাম অনুসারে চেকবক্সগুলি নির্বাচন / অপসারণ করে।

সমস্ত বাটন নির্বাচন করুন

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

কিছু চেকবক্স নির্বাচন করতে

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

জাভাস্ক্রিপ্ট

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }

Comments

এটা কাজ করে। দয়া করে কোডেপেন.ইও

— নিকোলাস গিজ্পেনেক

Answer 19

এটি এটিই করবে, উদাহরণস্বরূপ যদি আপনার কাছে 5 টি চেকবক্স থাকে এবং আপনি সমস্ত চেক ক্লিক করেন, এটি সমস্ত চেক করে, এখন আপনি যদি সমস্ত চেকবক্সটি চেকবক্সটি চেক বাক্সটি চেকবক্স থেকে চেক করতে চান তবে আপনি শেষ চেকবক্সটি আনচেক করার সময় নির্বাচন করুন সমস্ত চেকবাক্স এছাড়াও চেক করা হয়

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })

Answer 20

আমি যেমন মন্তব্য করতে পারি না, উত্তর হিসাবে এখানে: আমি আরও সাধারণ উপায়ে ক্যান বার্ক গেডার এর সমাধানটি লিখতে পারি, যাতে আপনি অন্যান্য চেকবক্সগুলির জন্য ফাংশনটি পুনরায় ব্যবহার করতে পারেন

<script language="JavaScript">
  function toggleCheckboxes(source, cbName) {
    checkboxes = document.getElementsByName(cbName);
    for (var i = 0, n = checkboxes.length; i < n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

Comments

অনুপস্থিত বন্ধনী চিহ্নিত করার জন্য খালদী ও সাফাই ধন্যবাদ!

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

Answer 21

Jquery জন্য শীর্ষ উত্তর গ্রহণ করে, মনে রাখবেন যে ক্লিক ফাংশনটি দেওয়া বস্তুটি একটি ইভেন্টহ্যান্ডলার, মূল চেকবক্স অবজেক্ট নয়। সুতরাং কোড shoudl নিম্নলিখিত হিসাবে সংশোধন করা হবে।

এইচটিএমএল

<input type="checkbox" name="selectThemAll"/> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

জাভাস্ক্রিপ্ট

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})

Comments

প্রথম ইনপুট টাইপটি কেবল ভুলই নয়, এটি সংশোধন করার পরেও এটি আমার পক্ষে কার্যকর হয়নি

— ত্রুটি বার্তা

Answer 22

এখানে একটি backbone.js বাস্তবায়ন:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},

Answer 23

এইচটিএমএল

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

জাভাস্ক্রিপ্ট

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});

Answer 24

1: ওনিচ ইভেন্ট হ্যান্ডলার যুক্ত করুন

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: চেক / চেক না করা পরিচালনা করতে কোডটি সংশোধন করুন

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

Comments

দয়া করে, কোড পেস্ট করুন কপি করবেন না এর পরিবর্তে একটি লিঙ্ক সহ পড়ুন stackoverflow.com/questions/19282219/...

— java_dude

Answer 25

নীচের পদ্ধতিগুলি বোঝার জন্য খুব সহজ এবং আপনি কয়েক মিনিটের মধ্যে বিদ্যমান ফর্মগুলি প্রয়োগ করতে পারেন

জ্যাকুরি সহ,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

এইচটিএমএল ফর্ম এ বোতাম নীচে রাখুন

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

শুধু জাভাস্ক্রিপ্ট ব্যবহার করে,

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

এইচটিএমএল ফর্ম এ বোতাম নীচে রাখুন

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

Answer 26

আপনি এই সহজ কোড ব্যবহার করতে পারেন

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});

Answer 27

jQuery ব্যবহার করে শর্ট হ্যান্ড সংস্করণে এটি তৈরি করতে

সমস্ত চেকবক্স নির্বাচন করুন

<input type="checkbox" id="chkSelectAll">

বাচ্চাদের চেকবক্স

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

jQuery এর

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})

Answer 28

কিছুটা দেরি হতে পারে তবে সমস্ত চেকবাক্স চেক করার সময়, আমি বিশ্বাস করি আপনার যখন সমস্ত চেকবক্স চেক করা আছে তখন তার জন্য দৃশ্যটিও পরিচালনা করতে হবে এবং তারপরে নীচের চেকবক্সগুলির একটি অপসারণ করা উচিত।

সেক্ষেত্রে এটি সমস্ত চেকবক্সটি স্বয়ংক্রিয়ভাবে চেক করা উচিত।

এছাড়াও সমস্ত চেকবাক্সগুলি ম্যানুয়ালি চেক করার সময়, সমস্ত চেকবক্স স্বয়ংক্রিয়ভাবে চেক করা হওয়ার পরে আপনাকে শেষ করা উচিত।

আপনার দুটি ইভেন্ট হ্যান্ডলার দরকার, একটি চেক সমস্ত বাক্সের জন্য এবং একটি নীচের একক বাক্সে ক্লিক করার জন্য।

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}

Answer 29

সহজ এবং যথাযথ:

jQuery - একটি বোতাম বা ডিভ বা একটি লেবেল উপাদান ক্লিক করার পরে। পৃষ্ঠায় সমস্ত চেকবাক্স চেক করুন। মনে রাখবেন আপনাকে সামঞ্জস্য করতে হবে: এটিকে আরও নির্দিষ্ট করে তুলতে চেকবক্স check

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});