Πώς μπορώ να κάνω μια εναλλαγή πλαίσιο ελέγχου από κάνοντας κλικ στην ετικέτα κειμένου, καθώς;

ψήφοι
29

Checkboxesσε HTMLμορφές δεν έχουν έμμεση ετικέτες τους. Προσθέτοντας μια ρητή ετικέτα (κάποιο κείμενο) δίπλα σε αυτό δεν εναλλαγή του checkbox.

Πώς μπορώ να κάνω μια εναλλαγή πλαίσιο ελέγχου από κάνοντας κλικ στην ετικέτα κειμένου, καθώς;

Δημοσιεύθηκε 05/08/2008 στις 12:51
πηγή χρήστη
Σε άλλες γλώσσες...                            


8 απαντήσεις

ψήφοι
43

Αν σωστά markup κώδικα HTML, δεν υπάρχει καμία ανάγκη για τη javascript. Ο ακόλουθος κώδικας θα επιτρέψει στο χρήστη να κάνει κλικ στο κείμενο της ετικέτας για να τσεκάρετε το κουτάκι.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

Η για χαρακτηριστικό στους συνδέσμους στοιχείο ετικέτα του id χαρακτηριστικό στο στοιχείο εισόδου και το πρόγραμμα περιήγησης κάνει τα υπόλοιπα.

Αυτό έχει τον έλεγχο για να εργαστούν σε:

  • IE6
  • IE7
  • Firefox
Απαντήθηκε 05/08/2008 στις 13:00
πηγή χρήστη

ψήφοι
17

Ρυθμίστε το CSS displayιδιοκτησία της ετικέτας να είναι ένα στοιχείο μπλοκ και τη χρήση που αντί div σας - κρατά την σημασιολογική έννοια μιας ετικέτας, επιτρέποντας ταυτόχρονα ό, τι στυλ που σας αρέσει.

Για παράδειγμα:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Απαντήθηκε 05/08/2008 στις 13:52
πηγή χρήστη

ψήφοι
3

Όπως υποδεικνύεται από @Gatekiller και άλλους, η σωστή λύση είναι η <ετικέτα> tag.

Κάντε κλικ-in-the-κειμένου είναι ωραίο, αλλά υπάρχει ένας άλλος λόγος για να χρησιμοποιήσετε το <ετικέτα> tag: προσβασιμότητας. Τα εργαλεία που με προβλήματα όρασης άνθρωποι χρησιμοποιούν για να έχουν πρόσβαση στο διαδίκτυο χρειάζονται <ετικέτα> s για ανάγνωση από την έννοια της πλαίσια ελέγχου και τα κουμπιά επιλογής. Χωρίς <label> s, θα πρέπει να μαντέψει με βάση το περιβάλλον κείμενο, και συχνά καταλάβει λάθος ή πρέπει να παραιτηθεί.

Είναι πολύ απογοητευτικό να βρεθούμε αντιμέτωποι με μια μορφή που διαβάζει «Παρακαλούμε επιλέξτε τρόπο αποστολής, ραδιόφωνο-κουμπί1, ραδιόφωνο-button2, ραδιο-button3 σας».

Σημειώστε ότι η προσβασιμότητα διαδίκτυο είναι ένα περίπλοκο θέμα? <Label> s είναι ένα απαραίτητο βήμα, αλλά δεν είναι αρκετά για να εγγυηθούν την προσβασιμότητα και τη συμμόρφωση με τους κανονισμούς της κυβέρνησης, όπου ισχύει.

Απαντήθηκε 25/08/2008 στις 16:21
πηγή χρήστη

ψήφοι
2

Ronnie,

Αν θέλετε να επισυνάψουν το κείμενο της ετικέτας και κουτάκι μέσα σε ένα στοιχείο wrapper, μπορείτε να κάνετε τα εξής:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Απαντήθηκε 05/08/2008 στις 13:28
πηγή χρήστη

ψήφοι
1

Μπορείτε να τυλίξετε πλαίσιο ελέγχου σας στην ετικέτα:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Απαντήθηκε 05/08/2008 στις 13:25
πηγή χρήστη

ψήφοι
0

Θα πρέπει να τυλίξετε μόνο το πλαίσιο ελέγχου στην ετικέτα ετικέτα ακριβώς όπως αυτό

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

ΒΙΟΛΙ

ή μπορείτε επίσης να χρησιμοποιήσετε το για την ιδιότητα της ετικέτας και ταυτότητα του πλαισίου ελέγχου σας όπως παρακάτω

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

ΒΙΟΛΙ

Απαντήθηκε 01/09/2015 στις 12:10
πηγή χρήστη

ψήφοι
-1

Αυτό θα πρέπει να εργαστεί:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

εάν αυτό doesnt, pleae σωστή εισαγωγή μου!

Απαντήθηκε 09/03/2015 στις 12:13
πηγή χρήστη

ψήφοι
-2

Αναδίπλωση με την ετικέτα εξακολουθεί να μην επιτρέπει κλικ «οπουδήποτε στο παράθυρο» - ακόμα μόνο για το κείμενο! Αυτό κάνει τη δουλειά για μένα:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

αλλά δυστυχώς έχει πολλά javascript που είναι αποτελεσματικά την εναλλαγή δύο φορές.

Απαντήθηκε 05/08/2008 στις 13:34
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more