it-swarm.dev

Nastavení zaškrtávacího políčka zaškrtávacího políčka s jQuery?

Chtěl bych něco takového udělat zaškrtnutím checkbox pomocí jQuery :

$(".myCheckBox").checked(true);

nebo 

$(".myCheckBox").selected(true);

Existuje taková věc?

3783
tpower

Použití:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

A pokud chcete zkontrolovat, zda je zaškrtávací políčko zaškrtnuto nebo ne:

$('.myCheckbox').is(':checked');
660
bchhun

Můžete dělat

$('.myCheckbox').attr('checked',true) //Standards compliant

nebo

$("form #mycheckbox").attr('checked', true)

Pokud máte vlastní kód v události onclick pro zaškrtávací políčko, které chcete vypálit, použijte tento kód:

$("#mycheckbox").click();

Zrušení zaškrtnutí můžete zrušit úplným odebráním atributu:

$('.myCheckbox').removeAttr('checked')

Všechny zaškrtávací políčka můžete zkontrolovat takto:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
139
Micah

Objekt $ .fn můžete také rozšířit o nové metody:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Pak stačí udělat:

$(":checkbox").check();
$(":checkbox").uncheck();

Nebo jim můžete dát více jedinečných názvů, jako je mycheck () a myuncheck () v případě, že používáte jinou knihovnu, která tyto názvy používá.

75
livefree75
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Poslední z nich zapálí událost klepnutí pro zaškrtávací políčko, ostatní nebudou. Pokud tedy máte vlastní kód v události onclick pro zaškrtávací políčko, které chcete vypálit, použijte poslední.

64
Chris Brandsma

Chcete-li zaškrtnout políčko, měli byste použít

 $('.myCheckbox').attr('checked',true);

nebo

 $('.myCheckbox').attr('checked','checked');

a zaškrtnutí políčka by mělo být vždy nastaveno na hodnotu false:

 $('.myCheckbox').attr('checked',false);

Pokud udelas

  $('.myCheckbox').removeAttr('checked')

odstraní celý atribut a proto nebudete moci formulář resetovat.

BAD DEMO jQuery 1.6 . Myslím, že je to rozbité. Pro 1.6 budu dělat nové místo na to.

NOVÝ PRACOVNÍ DEMO jQuery 1.5.2 pracuje v Chrome.

Obě dema používají

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
62
mcgrailm

Za předpokladu, že otázka je ...

Jak zkontroluji zaškrtávací políčko BY VALUE?

Nezapomeňte, že v typickém zaškrtávacím políčku mají všechny vstupní značky stejný název, liší se atributem value: pro každý vstup sady neexistuje žádné ID.

Xianova odpověď může být rozšířena o více specifický volič, používat následující řádek kódu:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
44
Peter Krauss

Chybí mi řešení. Vždy budu používat:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
44
Overbeeke

To vybere prvky, které mají zadaný atribut s hodnotou obsahující daný dílčí řetězec "ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

Vybere všechny prvky, které obsahují ckbItem v atributu name.

44
Abou-Emish

Zaškrtnutí políčka pomocí jQuery 1.6 nebo vyšší:

checkbox.prop('checked', true);

Chcete-li zrušit zaškrtnutí, použijte:

checkbox.prop('checked', false);

Zde je to, co chci použít k přepnutí políčka pomocí jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

Pokud používáte jQuery 1.5 nebo nižší:

checkbox.attr('checked', true);

Chcete-li zrušit zaškrtnutí, použijte:

checkbox.attr('checked', false);
40
Ramon de Jesus

Zde je způsob, jak to udělat bez jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>

35
Aeoril

Zkuste to:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking
30
prashanth

Zde je kód pro zaškrtnutí a odškrtnutí pomocí tlačítka:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Aktualizace: Zde je stejný blok kódu pomocí novější metody Jquery 1.6+ prop, která nahrazuje attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});
28
starjahid

Můžeme použít elementObject s jQuery pro získání kontrolovaného atributu:

$(objectElement).attr('checked');

Můžeme to použít pro všechny verze jQuery bez jakékoli chyby.

Aktualizace: Jquery 1.6+ má novou metodu prop, která nahrazuje attr, např .:

$(objectElement).prop('checked');
26
Prasanth P

Pokud používáte PhoneGap děláte vývoj aplikací a máte na tlačítku hodnotu, kterou chcete okamžitě zobrazit, nezapomeňte to udělat

$('span.ui-[controlname]',$('[id]')).text("the value");

Zjistil jsem, že bez rozpětí nebude rozhraní aktualizovat bez ohledu na to, co děláte.

25
Clement Ho

Zde je kód a ukázka, jak zkontrolovat více zaškrtávacích políček ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});
23
tamilmani

Další možné řešení:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
20
Muhammad Aamir Ali

Buďte si vědomi nevracení paměti v Internet Exploreru před Internet Explorer 9 , jako stavy dokumentace jQuery :

V aplikaci Internet Explorer před verzí 9 pomocí příkazu .prop () nastavit vlastnost prvku DOM Na jinou hodnotu než jednoduchou primitivní hodnotu (Číslo, řetězec nebo boolean) může způsobit nevracení paměti, pokud vlastnost není odstraněna (pomocí .removeProp ()) před odstraněním prvku DOM z dokumentu. Chcete-li bezpečně nastavit hodnoty objektů DOM bez paměti Úniky, použijte .data ().

18
naor

Pro jQuery 1.6+

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

Pro jQuery 1.5.x a nižší

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Zkontrolovat,

$('.myCheckbox').removeAttr('checked');
18
logan

Pokud používáte mobilní telefon a chcete, aby se rozhraní aktualizovalo a zaškrtávací políčko bylo zaškrtnuto, použijte následující:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
18
Matt Peacock

Chcete-li zkontrolovat a zrušit zaškrtnutí

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
jj2422
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
mahmoh

Jak @ livefree75 řekl:

jQuery 1.5.x a níže

Objekt $ .fn můžete také rozšířit o nové metody:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Ale v nových verzích jQuery musíme použít něco takového:

jQuery 1.6+

    (function($)  {
       $.fn.extend({
          check : function()  {
             return this.filter(":radio, :checkbox").prop("checked", true);
          },
          uncheck : function()  {
             return this.filter(":radio, :checkbox").prop("checked",false);
          }
       });
    }(jQuery));

Pak stačí udělat:

    $(":checkbox").check();
    $(":checkbox").uncheck();
16

Toto je pravděpodobně nejkratší a nejjednodušší řešení:

$(".myCheckBox")[0].checked = true;

nebo

$(".myCheckBox")[0].checked = false;

Ještě kratší by bylo:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Zde je také a jsFiddle .

15
frieder

Prostý JavaScript je velmi jednoduchý a mnohem méně režijní:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Příklad zde

14
Alex W

Když zaškrtnete políčko jako;

$('.className').attr('checked', 'checked')

nemusí to stačit. Měli byste také zavolat níže uvedenou funkci;

$('.className').prop('checked', 'true')

Zejména při odebrání atributu zaškrtnutého políčka.

13
Serhat Koroglu

Nemohl jsem to fungovat pomocí:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Zaškrtávací políčko zaškrtne jak true, tak false. Pro mě to bylo:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
13
fredcrs

Zde je kompletní odpověď Pomocí jQuery

Testuji to a funguje to 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });
11
user1477929

V případě, že používáte ASP.NET MVC , generujte mnoho zaškrtávacích políček a později vyberte/zrušte výběr všech pomocí JavaScriptu můžete provést následující.

HTML

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }
10

V jQuery

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

nebo 

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

V JavaScriptu

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
10
ijarlax

To může někomu pomoci.

HTML5

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScript.

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }
7
Sedrick

Můžete to zkusit:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
anusha
$(".myCheckBox").prop("checked","checked");
4
mathew

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

4
David Arul

Pokud používáte Bootstrap (možná nepozorovaně) ...

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

3
Kenmeister

Pokud používáte .prop('checked', true|false) a nezměnili jste checkbox, potřebujete přidat trigger('click') takhle

//check
$('#checkboxF1').prop( "checked", true).trigger('click');


//un-Check
$('#checkboxF1').prop( "checked", true).trigger('click');
1
Alex Montoya

Zaškrtnuté políčko můžete zaškrtnout pomocí JS různými způsoby. můžete vidět níže.

  1. První metoda - $('.myCheckbox').prop('checked', true);

  2. Druhá metoda - $('.myCheckbox').attr('checked', true);

  3. Třetí metoda (pro kontrolu, zda je zaškrtávací políčko zaškrtnuto nebo ne) - $('.myCheckbox').is(':checked')

1
Gaurang Sondagar

Upraveno v lednu 2019

Můžete použít: .prop (propertyName) - verze byla přidána: 1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

Na Angular Framework

Příklad 1

V souboru .html

<input type="checkbox" (change)="toggleEditable($event)">

V souboru .ts

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

Příklad 2

V souboru .html

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
0
Lyes CHIOUKH