de-vraag
Więcej
Question

sprawdzić / odznaczyć pole wyboru używając jquery?

Mam kilka wejściowych pól tekstowych na mojej stronie i wyświetlam ich wartości za pomocą JavaScript.

Używam funkcji .set("value","") do edycji wartości, dodania dodatkowego pola wyboru oraz do przekazania wartości.

Tutaj chcę sprawdzić, że jeśli wartość == 1, to pole wyboru powinno być zaznaczone. W przeciwnym razie, powinno pozostać niezaznaczone.

Zrobiłem to za pomocą dwóch divów, ale nie czuję się z tym komfortowo, czy jest jakieś inne rozwiązanie?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}
Aniket G
Aniket G
Edytowane pytanie 11. marca 2019 в 11:51
Programowanie
jquery
jquery-ui
Solution / Answer

Dla jQuery 1.6+ :

Funkcja .attr() jest przestarzała dla właściwości; zamiast niej należy używać nowej funkcji .prop():

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

Dla jQuery < 1.6:

Aby sprawdzić / odznaczyć pole wyboru, użyj atrybutu checked i zmień to. Z jQuery możesz zrobić:

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

Bo wiesz, że w HTML wyglądałoby to coś w stylu:

<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->

Jednak nie możesz zaufać metodzie .attr(), aby uzyskać wartość pola wyboru (jeśli potrzebujesz). Będziesz musiał polegać na metodzie .prop().

Christopher Taylor
Christopher Taylor
Edytowana odpowiedź 19. stycznia 2018 в 9:14
1214

Możesz użyć prop() do tego, ponieważ Przed jQuery 1.6, metoda .attr() czasami brała pod uwagę wartości właściwości podczas pobierania niektórych atrybutów, co mogło powodować niespójne zachowanie. Począwszy od jQuery 1.6, metoda .prop() zapewnia sposób na jawne pobieranie wartości właściwości, podczas gdy metoda .attr() pobiera atrybuty.

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

lub po prostu,

$('#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
Rohan Kumar
Edytowana odpowiedź 31. stycznia 2017 в 4:35
62

Możesz ustawić stan pola wyboru na podstawie wartości:

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