Versuchen, um einen link + checkbox, beide anklickbar und text ändern, klicken Sie auf

Derzeit bin ich gerade mit jQuery eine checkbox und ein Textfeld, das den text zu ändern, wenn das Kästchen angekreuzt ist, aber ich versuche es so zu machen, dass die box ODER der text angeklickt werden kann und das Ergebnis geändert wird text-und Ankreuzfelder?

Kann jemand helfen mir weiter?

Poste bitte den code, den Sie sind es bereits versucht.
welche hv Sie versucht, so weit?

InformationsquelleAutor 50dollanote | 2013-08-26

4

gerade einen label-text um das Kontrollkästchen und text, es wird also so etwas wie:
```
    <label><input type="checkbox" />Add to cart</label>
```
Dadurch ist der text Teil der checkbox

InformationsquelleAutor Terry
1

sehen DEMO

in html
```
<input type="checkbox" id="test"> <label for="test">text</label>
```
in JS
```
$(document).ready(function () {
  $("#test").click(function () {
    if ($(this).is(":checked")) {
      $(this).next("label").text("Added");
    } else {
      $(this).next("label").text("Add to Cart"); //your default color set
    }
  });
});
```
Referenz geprüft

jQuery.die next () -
- Es sei denn, Sie müssen, Sie sollten sich nicht darauf verlassen, dass die Reihenfolge der Elemente durch die Verwendung von prev oder next. Siehe Wählen Sie den zugehörigen label-element ein input-Feld. Auch, nicht OP ' s Frage, wie ändern Sie die Bezeichnung text
- ich bearbeitete meinen code jetzt seine Arbeit Dank @KyleMit
InformationsquelleAutor Rituraj ratan
0

mit label und setzt das for-Attribut, klicken Sie auf den text, und das Feld wird markiert/nicht markiert...
```
<label for="check1">Label for checkbox</label> 
<input type="checkbox" id="check1" value="value1">Option</input>
```
InformationsquelleAutor Lucas Do Amaral

DEMO

Versuchen, diese

$("#chk").click(function () {

    if ($(this).is(":checked")) {
        $(this).next().fadeOut("slow", function () {
            $("#chk").next().text("Added");
        }).fadeIn("slow");

    } else {

        $(this).next().fadeOut("slow", function () {
            $("#chk").next().text("Add to cart");
        }).fadeIn("slow");
    }

});

html

<input type="checkbox" id="chk">
<label for="chk" style="text-decoration:underline">Add to cart</label>

Hoffe, das hilft,Danke

InformationsquelleAutor SarathSprakash

0

Den HTML ist ziemlich straight-forward. Es gibt zwei Möglichkeiten zum angeben einer Beschriftung für ein element (so, dass auf jedem Feld sowohl die Aktualisierung der checkbox):
1. Einstellung des Labels for - Attribut auf die id des Elements
2. Platzieren Sie das element in einem label
Werde ich zuerst verwenden, so dass das markup sollte so Aussehen:
```
<input type='checkbox' id='chkCart' />
<label for='chkCart'>Add to Cart</label>
```
Können Sie jQuery um den rest Griff:
- Erstens, stellen Sie sicher, dass das DOM geladen ist, indem er Ihre javascript in eine .bereit Funktion (da werden wir schauen, um zu ändern, diese Elemente).
- Dann fügen Sie einen Ereignis-handler des checkbox click-Ereignis mithilfe der .klicken Sie auf Funktion.
- Da haben wir die for - Attribut für diesen besonderen Etikett, können wir die - Attribut gleich selector ([name="value"]) durch die Suche nach einem label mit der gleichen for Wert als unsere Berufung element id.
- Können Sie überprüfen, ob das Objekt, das das Ereignis ausgelöst hat, wird überprüft, an-oder ausschalten, indem Sie die :checked selector.
- Sie können das Javascript ist ternary Betreiber bedingt set jeden Wert
- Dann benennen Sie das label mithilfe der .text Funktion
Sollte alles so Aussehen:
```
$(function () {
    $("#chkCart").click(function () {
        var lbl = $("label[for='"+$(this).attr('id')+"']");
        lbl.text($(this).is(":checked")?"Added":"Add to Cart");
    });
});
```
jsFiddle Demo

InformationsquelleAutor KyleMit

-1

Zugeordnet werden kann onChange-Ereignis des Kontrollkästchens , wenn es überprüft , Sie zeigen Ihr text,sonst zeigen Sie den link . DEMO HIER

HTML-code:

<input type='checkbox' id='check'/>
<label><a href='#'>add to cart</a></label>

JavaScript/jQuery-Code :

$('#check').change(function(){

  if ($(this).is(":checked")) $(this).next().text('added');
  else $(this).next().html("<a href='#'>add to cart</a>");

});

InformationsquelleAutor Charaf JRA

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

html

jsFiddle Demo