Ik heb enkele tekstvelden in mijn pagina en ik geef de waarden weer met JavaScript.
Ik gebruik de .set("value","")
functie om de waarde aan te passen, een extra checkbox veld toe te voegen, en om een waarde door te geven.
Hier wil ik controleren dat als waarde == 1
, dan moet deze checkbox aangevinkt zijn. Anders moet hij uitgevinkt blijven.
Ik heb dit gedaan door twee divs te gebruiken, maar ik voel me daar niet prettig bij, is er een andere oplossing?
if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
Voor jQuery 1.6+ :
.attr() is afgeschreven voor eigenschappen; gebruik in plaats daarvan de nieuwe functie .prop() als:
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
Voor jQuery < 1.6:
Om een checkbox aan/uit te vinken, gebruik je het attribuut checked
en verander je dat. Met jQuery kun je dat doen:
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
Want weet je, in HTML zou het er ongeveer zo uitzien:
<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->
Je kunt echter niet vertrouwen op de .attr() methode om de waarde van het selectievakje te krijgen (als je dat al moet). Je zult moeten vertrouwen op de .prop() methode.
Je kunt hiervoor prop() gebruiken, want vóór jQuery 1.6 hield de methode .attr() soms rekening met eigenschapswaarden bij het ophalen van sommige attributen, wat inconsistent gedrag kon veroorzaken. Vanaf jQuery 1.6, biedt de .prop()
methode een manier om expliciet eigenschap waarden op te halen, terwijl .attr()
attributen ophaalt.
var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);
of eenvoudig,
$('#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">