Kontrollkästchen mit Eingabetaste auswählen

Ich habe ein paar Kontrollkästchen, die ich mit der Eingabetaste anstelle der Leertaste auswählen muss, wenn es den Fokus hat. Ich habe den Code darunter für ein Kontrollkästchen, aber ich brauche mehrere Kontrollkästchen. Ich weiß, dass das ID-Tag eindeutig sein muss, aber ich bin mir nicht sicher, wie es geht.Kontrollkästchen mit Eingabetaste auswählen

$(document).ready(function() { 
    $('#mycheckbox').on('keypress', function (event) { 
     if (event.which === 13) { 
      this.checked = !this.checked; 
     } 
    }); 
}); 

<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">My text<br>

Ich versuche, dies auf alle Kontrollkästchen, um die Arbeit zu machen nicht nur die mit dem MyCheckBox id.

Hier ist mein vollständiger Code so weit:

<html> 
<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery- 

latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('input:checkbox').on('keypress', function (event) { 
     if (event.which === 13) { 
      $(this).prop('checked', !$(this).prop('checked')); 
     } 
    }); 
}); 
</script> 

</head> 
<body> 

<script 

src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></ 

script> 
<textarea class="textfield" id="form1" name="form1">My text 

here</textarea> 
<div class="taglist"> 
    <label><input type="checkbox" value="Value 1">Value 1</label> 
    <label><input type="checkbox" value="Value 2">Value 2</label> 
    <label><input type="checkbox" value="Value 3">Value 3</label> 
    <label><input type="checkbox" value="Value 4">Value 4</label> 
    <label><input type="checkbox" value="Value 5">Value 5</label> 
</div> 
<script type="text/javascript"> 
function updateTextArea() { 
    var allVals = $('#form1').data('initialVal'), 
     lineCount = 1; 
    $('.taglist :checked').each(function(i) { 
    allVals+= (i != 0 || allVals.length > 0 ? "\r\n" : "") + $(this).val 

(); 
    lineCount++; 
    }); 
    $('#form1').val(allVals).attr('rows', lineCount); 

} 
$(function() { 
    $('.taglist input').click(updateTextArea); 

    $('#form1').data('initialVal', $('#form1').val()); 
    updateTextArea(); 
}); 
</script> 

</body> 
</html>

Quelle

2017-02-17 Greg

Bitte senden Sie den HTML-Code, den Sie verwenden. –

@Greg - Sie aktualisieren das Textfeld, wenn ein Kontrollkästchen angeklickt wird. Besser ist es das 'change' Event zu benutzen, wie zB $ ('. Taglist input'). Change (updateTextArea);'. Dann lösen Sie das Änderungsereignis direkt aus, nachdem Sie ein Kästchen programmgesteuert aktiviert haben, indem Sie '$ (this) .change();' aufrufen. –

Fantastisch, das funktioniert super. Ich schätze die Zeit jedes Einzelnen. Ich danke dir sehr!!!! – Greg

Klingt wie Sie dies auf allen Kontrollkästchen, um die Arbeit zu machen versuchen? Verwenden Sie in diesem Fall $(":checkbox") statt $('#mycheckbox')

Quelle

2017-02-17 21:40:43 Blakethepatton

Das hat es. Vielen Dank. Ihr seid so schnell !!!! Danke Ihnen allen für Ihre Hilfe. – Greg

Das hat es. Vielen Dank. Ihr seid so schnell !!!! Danke Ihnen allen für Ihre Hilfe. Ich habe allerdings ein Problem. Ich verwende das Kontrollkästchen, um den Wert an ein Textfeld zu senden. Wenn ich mit der Maus klicke, funktioniert es großartig. Die Eingabetaste wählt jetzt das Kontrollkästchen aus, aber der Wert wird nicht an den Textbereich übergeben. – Greg

Der Wert ist der Wert von "checked" oder der Name des Kontrollkästchens? – Blakethepatton

Sie müssen stattdessen classes verwenden.

<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br>

JQuery

$('.mycheckbox').on('keypress', function (event) { 
    if (event.which === 13) { 
     $(this).prop('checked', !$(this).prop('checked')); 
    } 
});

Eine andere Methode ist eine Art selector zu verwenden, um die input Elemente mit bestimmten Art zu erhalten.

$('input[type=checkbox]')

$(':checkbox').on('keypress', function (event) { 
 
    if (event.which === 13) { 
 
     $(this).prop('checked', !$(this).prop('checked')); 
 
     $('textarea').html($(this).prop('checked').toString()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike" class="mycheckbox">My text<br> 
 
<textarea></textarea>

Quelle

2017-02-17 21:41:09

@Downvoter, bitte erklären Sie Ihren Grund. –

Ich bin nicht der Downvoter, aber warum erstellen Sie eine Klasse, wenn wir Zugriff auf die Pseudo-Klassenselektor von ': Checkbox' haben? – Blakethepatton

$(document).on('keypress', function(event) { 
 
    if (event.keyCode == 13) { 
 
    $('#mycheckbox').prop('checked', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox">

Quelle

2017-02-17 21:41:12

Oder Sie können Klassenauswahl statt id-Selektor. Fügen Sie einfach eine Klasse zu Ihrem Kontrollkästchen hinzu.

Quelle

2017-02-17 21:41:21 Janne

können Sie input[type="checkbox"] verwenden oder eine Klasse zu jedem Kontrollkästchen hinzufügen und ja IDs müssen eindeutig sein:

$(document).ready(function() { 
 
    $('input[type="checkbox"]').on('keypress', function(event) { 
 
    if (event.which === 13) { 
 
     this.checked = !this.checked; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox1">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox2">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox3">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike" id="mycheckbox4">My text

Quelle

2017-02-17 21:41:22 Ionut

Verwenden attribute-equal selector, um die Eingänge des Typs zu erhalten checkbox wie folgt aus:

$(document).ready(function() { 
 
    $('input[type = "checkbox"]').on('keypress', function(event) { 
 
    if (event.which === 13) { 
 
     this.checked = !this.checked; 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Colors" value="Bike">My text<br> 
 
<input type="checkbox" name="Colors" value="Bike">Other text<br>

Quelle

2017-02-17 21:41:30

den Wähler ändern sollte es tun:

$('input[type=checkbox]')

Dadurch werden alle Eingaben vom Typ Checkbox zurück. Ein anderer Ansatz besteht darin, alle Kontrollkästchen zu markieren, die Sie an einer Klasse interessiert, und dann die Klasse anzupassen. Ich habe diesen Ansatz ebenfalls vorgeschlagen, falls Sie ihn nicht auf alle anwenden möchten.So ist die HTML:

<input type="checkbox" class="support-enter" />

Dann wird der jQuery-Selektor:

$('.support-enter')

Quelle

2017-02-17 21:41:43

Kontrollkästchen mit Eingabetaste auswählen

Antwort

Verwandte Themen