zaškrtnout / odškrtnout checkbox pomocí jquery?

Na stránce mám několik vstupních textových polí a jejich hodnoty zobrazuji pomocí JavaScriptu.

K úpravě hodnoty, přidání dalšího zaškrtávacího políčka a předání hodnoty používám funkci .set("value","").

Zde chci zkontrolovat, že pokud hodnota == 1, pak má být toto zaškrtávací políčko zaškrtnuto. V opačném případě by mělo zůstat nezaškrtnuté.

Udělal jsem to pomocí dvou divů, ale necítím se s tím dobře, existuje nějaké jiné řešení?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}
Aniket G
Upravená otázka 11 březen 2019 в 11:51
Programování
jquery jquery-ui
2 červenec 2013 в 8:09
24 zobrazení
Řešení

Pro jQuery 1.6+ :

Funkce .attr() je pro vlastnosti zastaralá; místo ní použijte novou funkci .prop(), protože:

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

Pro jQuery < 1.6:

Chcete-li zaškrtnout/odškrtnout zaškrtávací políčko, použijte atribut checked a změňte jej. Pomocí jQuery můžete provést:

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

Protože víte, že v HTML by to vypadalo nějak takto:

<input type="checkbox" id="myCheckbox" checked="checked" /> 
<input type="checkbox" id="myCheckbox" />

Metodě .attr() však nemůžete věřit, že získá hodnotu zaškrtávacího políčka (pokud ji potřebujete). Budete se muset spolehnout na metodu .prop().

Christopher Taylor
Upravená odpověď 19 leden 2018 в 9:14
Komentáře (16)

K tomu můžete použít metodu prop(), protože před verzí jQuery 1.6 metoda .attr() někdy při načítání některých atributů zohledňovala hodnoty vlastností, což mohlo způsobit nekonzistentní chování. Od verze jQuery 1.6 poskytuje metoda .prop() způsob, jak explicitně načíst hodnoty vlastností, zatímco metoda .attr() načítá atributy.

var prop=false;
if(value == 1) {
   prop=true; 
}
$('#checkbox').prop('checked',prop);

nebo jednoduše,

$('#checkbox').prop('checked',(value == 1));

Snippet

$(document).ready(function() {
  var chkbox = $('.customcheckbox');
  $(".customvalue").keyup(function() {
    chkbox.prop('checked', this.value==1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">
Rohan Kumar
Upravená odpověď 31 leden 2017 в 4:35
Komentáře (0)

Stav zaškrtávacího políčka můžete nastavit na základě hodnoty:

$('#your-checkbox').prop('checked', value == 1);
Komentáře (1)