javascript - marcar - ¿Cómo implementar la casilla de verificación "seleccionar todo" en HTML?

select all checkbox js

Question

Tengo una página HTML con múltiples casillas de verificación.

Necesito una casilla más con el nombre "seleccionar todo". Cuando selecciono esta casilla de verificación, se deben seleccionar todas las casillas en la página HTML. ¿Cómo puedo hacer esto?

Answer 1

1: Agregue el controlador de eventos onchange

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

2: modificar el código para controlar marcado / desactivado

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

Answer 2

Aquí el formulario:

    <form action="#">
        <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>

        <fieldset>
            <legend>Loads of checkboxes</legend>
            <p><label><input type="checkbox" /> Option 1</label></p>
            <p><label><input type="checkbox" /> Option 2</label></p>
            <p><label><input type="checkbox" /> Option 3</label></p>
            <p><label><input type="checkbox" /> Option 4</label></p>
        </fieldset>
    </form>

y aquí el jquery:

$("#checkAll").change(function () {
    $("input:checkbox").prop(''checked'', $(this).prop("checked"));
});

Answer 3

Aquí hay una implementación de 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 4

Cuando llame a document.getElementsByName("name") , obtendrá un Object . Utilice .item(index) para recorrer todos los elementos de un Object

HTML:

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

Demostración 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>

Answer 6

Este ejemplo funciona con JavaScript nativo donde el nombre de la variable de casilla de verificación varía, es decir, no todos los "foo".

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

Answer 7

JavaScript es tu mejor apuesta. El siguiente enlace proporciona un ejemplo usando botones para seleccionar / seleccionar todo. Puede intentar adaptarlo para usar una casilla de verificación, simplemente use su ''seleccionar todo'' casilla de verificación ''onClick atributo.

Función Javascript para marcar o desmarcar todas las casillas de verificación

Esta página tiene un ejemplo más simple

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

Answer 8

Me sorprende que nadie haya mencionado document.querySelectorAll() . La solución Pure JavaScript, funciona en 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;
    }
}

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

Answer 9

Mi solución simple permite seleccionar / deseleccionar selectivamente todas las casillas de verificación en una porción determinada del formulario , al tiempo que usa diferentes nombres para cada casilla de verificación, de modo que puedan reconocerse fácilmente después de que se haya enviado POST.

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

Ejemplo HTML:

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

¡Espero que te guste!

Answer 10

No estoy seguro de que nadie haya respondido de esta manera (usando jQuery ):

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

Está limpio, no tiene bucles o cláusulas if / else y funciona como un encanto.

Answer 11

Para hacer que deseleccione:

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

Answer 12

Prueba este simple JQuery:

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

Answer 13

Puede tener diferentes conjuntos de casillas de verificación en el mismo formulario . Aquí hay una solución que selecciona / desmarca las casillas de verificación por nombre de clase, usando la función javascript de vainilla document.getElementsByClassName

El botón Seleccionar todo

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

Algunas de las casillas de verificación para seleccionar

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

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

Answer 14

Puedes usar este código simple

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

Answer 15

Si adopta la respuesta máxima para jquery, recuerde que el objeto pasado a la función de clic es un Manejador de eventos, no el objeto de casilla de verificación original. Por lo tanto, el código debe ser modificado de la siguiente manera.

Html

<input type="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

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

Answer 16

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

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

Answer 17

Usando jQuery y knockout:

Con esta casilla principal de enlace se mantiene sincronizada con las casillas de verificación subyacentes, se desactivará a menos que todas las casillas estén marcadas.

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

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

Answer 18

Versión ligeramente modificada que comprueba y desmarca respetuosamente

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

Answer 19

eso debería hacer el trabajo:

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

Answer 20

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

Answer 21

para hacerlo en versión abreviada usando jQuery

La casilla de verificación Seleccionar todo

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

Casilla de verificación de los niños

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

Simple y al PUNTO:

jQuery - Al hacer clic en un botón o div o un elemento de etiqueta. Marque todas las casillas de verificación en la página. Tenga en cuenta que deberá ajustar: casilla de verificación para hacerlo más específico.

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

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

});

Answer 23

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

Answer 24

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

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

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

ACTUALIZAR:

El for each...in construcción no parece funcionar, al menos en este caso, en Safari 5 o Chrome 5. Este código debería funcionar en todos los navegadores:

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