Cara membuat centang di html

Kotak centang adalah komponen input mendasar yang biasanya diwakili oleh kotak kosong dalam keadaan tidak dipilih dan kotak dengan tanda centang (karenanya nama kotak centang) saat dipilih. Mereka digunakan untuk mewakili pilihan boolean, masing-masing berkorelasi dengan pilihan nilai.

Mengelola kotak centang dalam HTML, khususnya menggunakan JavaScript dan jQuery bisa tampak agak tidak wajar. Saya berharap untuk menyelesaikan masalah umum yang mungkin Anda alami dengan tutorial ini.

Kotak centang baik digunakan saat Anda perlu mengumpulkan pilihan benar/salah (boolean) atau beberapa nilai dari daftar opsi.

Tombol radio menawarkan metafora pemilihan boolean yang serupa, tetapi digunakan ketika ada satu pilihan yang tersedia dalam daftar.

Ada dua kasus penggunaan umum untuk kotak centang:

• Saat Anda Membutuhkan Konfirmasi atau Pengakuan, misalnya mengakui persyaratan penggunaan
• Ketika Beberapa Nilai Dapat Menjawab Satu Pertanyaan

Kotak centang digunakan untuk contoh di mana pengguna mungkin ingin memilih beberapa opsi, seperti dalam contoh centang semua pertanyaan yang berlaku. Kotak Centang HTML Dipilih. Elemen kotak centang dapat ditempatkan ke halaman web dengan cara yang telah dicentang sebelumnya dengan menyetel atribut yang dicentang dengan nilai ya.

HTML yang Benar Untuk Membuat Kotak Centang

Tampaknya ada kebingungan tentang cara yang tepat atau benar untuk menulis html kotak centang. Saya juga pernah ke sana, jadi saya berempati dengan semua orang.

Sejauh antarmuka pengguna kotak centang, Anda harus menyertakan kotak centang dan elemen label, dalam urutan itu. Ini secara alami akan menempatkan kotak centang di sebelah kiri label.

Jika Anda perlu menukar pesanan mereka, Anda bisa dengan menukar html mereka atau menggunakan CSS. Namun, saya akan mengingatkan Anda lagi bahwa kecuali Anda tahu Anda dapat menjaga kotak centang terkait atau dikelompokkan secara horizontal.

Secara alami kotak centang adalah target kecil, yang untuk desktop dan mouse adalah normal, tetapi di ponsel saat ini, sentuhan dunia pertama bisa menjadi masalah.

Kabar baiknya adalah Anda dapat menghubungkan label kotak centang ke kotak centang, memperluas area yang dapat ditindaklanjuti yang dapat diklik atau disentuh pengguna untuk mengaktifkan status centang.

Ini dilakukan dengan menambahkan atribut 'nama' atau 'id' ke elemen kotak centang dan atribut 'untuk' yang sesuai ke label. Label untuk nilai atribut harus cocok dengan nama kotak centang atau nilai id.

Nilai Properti atau Atribut

Secara terprogram Anda bisa mendapatkan nilai saat ini atau memeriksa status dari properti nilai, yang juga merupakan atribut. Nilai tidak benar atau salah, meskipun sifat kotak centang adalah untuk menunjukkan apakah suatu nilai dipilih atau tidak.

#javascript #tutorial #html #managing

love2dev.com

Kotak centang adalah komponen input mendasar yang biasanya diwakili oleh kotak kosong dalam keadaan tidak dipilih dan kotak dengan tanda centang (karenanya nama kotak centang) saat dipilih.

Saya memiliki halaman HTML dengan beberapa kotak centang.

Saya perlu satu lagi kotak centang dengan nama "pilih semua". Ketika saya memilih kotak centang ini, semua kotak centang di halaman HTML harus dipilih. Bagaimana saya bisa melakukan ini?

<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/>

MEMPERBARUI:

The for each...inmembangun tampaknya tidak bekerja, setidaknya dalam hal ini, di Safari 5 atau Chrome 5. Kode ini harus bekerja di semua browser:

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

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

HTML:

<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" />


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

Saya tidak yakin ada yang belum menjawab dengan cara ini (menggunakan jQuery ):

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

Ini bersih, tidak memiliki loop atau jika klausa lain dan berfungsi sebagai pesona.

Untuk membatalkan pilihan:

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

Saya terkejut tidak ada yang disebutkan document.querySelectorAll(). Solusi JavaScript murni, bekerja di IE9 +.

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

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

 type="checkbox" />Bar 1 />
 type="checkbox" />Bar 2 />
 type="checkbox" />Bar 3 />
 type="checkbox" />Bar 4 />

Demo 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'>Alllabel>
  <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>

Versi sedikit berubah yang memeriksa dan menghapus centang dengan hormat

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

Saat Anda menelepon document.getElementsByName("name"), Anda akan mendapatkan Object. Gunakan .item(index)untuk melintasi semua item aObject

HTML:

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

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

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

Solusi sederhana saya memungkinkan untuk secara selektif memilih / membatalkan pilihan semua kotak centang di bagian tertentu dari formulir , sambil menggunakan nama yang berbeda untuk setiap kotak centang, sehingga mereka dapat dengan mudah dikenali setelah formulir diposkan.

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

Contoh HTML:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of themp>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevinp>
    <p><input type="checkbox" name="colin" />Firth, Colinp>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlettp>
div>

Saya harap Anda menyukainya!

Coba JQuery sederhana ini:

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

Sampel ini berfungsi dengan JavaScript asli di mana nama variabel kotak centang bervariasi, yaitu tidak semua "foo".

DOCTYPE html>
<html>
<body>

<p>Toggling checkboxesp>
<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>

<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 1asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6asp: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>

yang seharusnya melakukan pekerjaan:

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

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

Menggunakan jQuery dan sistem gugur:

Dengan kotak centang utama yang mengikat ini tetap selaras dengan kotak centang yang mendasari, kotak centang ini tidak akan dicentang kecuali semua kotak centang dicentang.

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

dalam html:

<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"/>

Anda mungkin memiliki beberapa set kotak centang pada formulir yang sama . Berikut adalah solusi yang memilih / membatalkan pilihan kotak centang berdasarkan nama kelas, menggunakan dokumen fungsi vanilla javascript.getElementsByClassName

Tombol Pilih Semua

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

Beberapa kotak centang untuk dipilih

<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' />

Javascript

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

Inilah yang akan dilakukan, misalnya jika Anda memiliki 5 kotak centang, dan Anda mengklik centang semua, centang semua, sekarang jika Anda hapus centang semua kotak centang mungkin dengan mengklik masing-masing 5 kotak centang, pada saat Anda menghapus centang pada kotak centang terakhir, pilih semua kotak centang juga tidak dicentang

$("#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)
      }
  })

Karena saya tidak dapat berkomentar, di sini sebagai jawaban: Saya akan menulis solusi Can Berk Güder dengan cara yang lebih umum, sehingga Anda dapat menggunakan kembali fungsi untuk kotak centang lainnya

<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/>

Jika mengadopsi jawaban teratas untuk jquery, ingatlah bahwa objek yang diteruskan ke fungsi klik adalah EventHandler, bukan objek kotak centang asli. Oleh karena itu kode harus dimodifikasi sebagai berikut.

Html

<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/>

Javascript

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

Berikut ini adalah implementasi 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;
    }

},

html

<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

javascript

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

1: Tambahkan Handler acara onchange

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

2: Memodifikasi kode untuk menangani dicentang / tidak dicentang

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

Metode di bawah ini sangat Mudah dimengerti dan Anda bisa mengimplementasikan formulir yang ada dalam hitungan menit

Dengan Jquery,

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

dalam bentuk HTML taruh di bawah tombol

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

Dengan hanya menggunakan javascript,

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

dalam bentuk HTML taruh di bawah tombol

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

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

Anda dapat menggunakan kode sederhana ini

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

untuk membuatnya dalam versi tangan pendek dengan menggunakan jQuery

Kotak centang pilih semua

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

Kotak centang anak-anak

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

Mungkin agak terlambat, tetapi ketika berhadapan dengan kotak centang centang semua, saya yakin Anda juga harus menangani skenario ketika Anda mencentang semua kotak centang, dan kemudian hapus centang pada salah satu kotak centang di bawah ini.

Dalam hal ini harus secara otomatis menghapus centang pada kotak centang centang semua.

Juga ketika secara manual memeriksa semua kotak centang, Anda akan berakhir dengan mencentang semua kotak centang secara otomatis dicentang.

Anda memerlukan dua penangan acara, satu untuk kotak centang semua, dan satu untuk ketika mengklik salah satu kotak di bawah ini.

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

Sederhana dan ke POINT:

jQuery - Setelah Mengklik tombol atau div atau elemen label. Centang semua kotak centang pada halaman. Ingatlah bahwa Anda harus menyesuaikan: centang untuk membuatnya lebih spesifik.

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

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

});