Jeg har nogle inputtekstfelter på min side og viser deres værdier ved hjælp af JavaScript.
Jeg bruger funktionen .set("value","")
til at redigere værdien, tilføje et ekstra afkrydsningsfelt og til at overføre en værdi.
Her vil jeg kontrollere, at hvis value == 1
, så skal denne afkrydsningsboks være markeret. Ellers skal den forblive afkrydset.
Jeg gjorde dette ved at bruge to divs, men jeg føler mig ikke tryg ved det, er der en anden løsning?
if(value == 1) {
$('#uncheck').hide();
$('#check').show();
} else{
$('#uncheck').show();
$('#check').hide();
}
For jQuery 1.6+ :
.attr() er forældet for egenskaber; brug i stedet den nye .prop() funktion som:
$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it
For jQuery < 1.6:
For at markere/afmarkere en afkrydsningsboks skal du bruge attributten checked
og ændre den. Med jQuery kan du gøre det:
$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it
For du ved, i HTML ville det se sådan ud:
<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->
Men du kan ikke stole på .attr() metoden til at få værdien af afkrydsningsfeltet (hvis du har brug for det). Du bliver nødt til at stole på .prop() metoden.
Du kan bruge prop() til dette, da før jQuery 1.6, tog .attr() metoden nogle gange hensyn til egenskabsværdier, når den hentede nogle attributter, hvilket kunne forårsage inkonsistent opførsel. Med jQuery 1.6 giver metoden .prop()
mulighed for eksplicit at hente egenskabsværdier, mens .attr()
henter attributter.
var prop=false;
if(value == 1) {
prop=true;
}
$('#checkbox').prop('checked',prop);
eller simpelthen,
$('#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">