Tutorial για δυναμικά checkbox με Javascript.

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για δυναμικά checkbox με Javascript.

Δημοσίευση από petsoukos » 24 Δεκ 2009 02:22

Tutorial δημιουργίας λειτουργίας Select All/Deselect All Checkboxes
Βαθμός δυσκολίας: Μέτριος.
Τεχνολογίες: Javascript
Απαιτήσεις: Code Editor, Development Server, Javascript Enabled Browser, βασικές γνώσεις προγραμματισμού
Πηγή: www.computerman.gr
Demo: Demo

Ένα απλό και επεξηγηματικό tutorial για την δημιουργία ενός επιλογέα checkbox, ο οποίος θα επιλέγει όλα τα checkboxes μιας φόρμας.Ας ξεκινήσουμε με το tutorial.
Η Φόρμα
1.

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Ανοίξτε τον editor σας και δημιουργήστε ένα κενό έγγραφο HTML.

2.

Κώδικας: Επιλογή όλων

<body>
<form name="checkboxes">
<input type="checkbox" name="list" value="1">CheckBox 1
<input type="checkbox" name="list" value="2">CheckBox 2
<input type="checkbox" name="list" value="3">CheckBox 3
<input type="checkbox" name="list" value="4">CheckBox 4
<input type="checkbox" name="list" value="5">CheckBox 5
<input type="checkbox" name="Dummy" value="0" /><span id="message">Επιλογή όλων!</span>
</form>
</body>
Δημιουργήστε μια απλή φόρμα με 6 checkbox inputs. Το τελευταίο checkbox θα είναι ο επιλογέας.

Και το Javascript

3.

Κώδικας: Επιλογή όλων

<title>Untitled Document</title>
<script>
var isSet = 0;
Ανοίξτε script tags αμέσως μετά το <title></title> και δηλώστε μια μεταβλητή με το όνομα isSet και περιεχόμενο 0.

4.

Κώδικας: Επιλογή όλων

<script>
var isSet = 0;
function SetUnsetAll&#40;checkboxes&#41; &#123;
Δημιουργήστε ένα function με όνομα SetUnsetAll και μια μεταβλητή με όνομα checkboxes. (Τα ονόματα των μεταβλητών κτλ είναι ενδεικτικά, μπορείτε να τα δηλώσετε όπως νομίζετε)

5.

Κώδικας: Επιλογή όλων

<script>
var isSet = 0;
function SetUnsetAll&#40;checkboxes&#41; &#123;
for &#40;i = 0; i < checkboxes.length; i++&#41; &#123;
if&#40;isSet > 0&#41; &#123;
checkboxes&#91;i&#93;.checked = false ;
&#125; else &#123;
checkboxes&#91;i&#93;.checked = true ;
&#125;
&#125;
Σε αυτό το κομμάτι κώδικα φτιάχνουμε μια for loop η οποία ελέγχει την μεταβλητή i με την ιδιότητα length. Το length κρατάει στην μνήμη του τον αριθμό των checkboxes που έχει η φόρμα μας. Στην περίπτωσή μας 6. Κάθε φορά που τρέχει η for loop θα αυξάνει την μεταβλητή i κατά μία μονάδα μέχρι να γίνει ίση με τον αριθμό των checkboxes (length). Ο κώδικάς της for loop είναι απλός. Για κάθε περίπτωση που το i είναι μικρότερο του length, θα ορίζει το checkbox σαν checked="checked" στον κώδικα HTML της σελίδας. Ο έλεγχος if(isSet >0) κρατάει την κατάσταση των checkboxes. Δηλαδή άμα ήταν επιλεγμένα η όχι. Ώστε κάθε φορά που θα πατάμε το checkbox για την επιλογή όλων να αφαιρεί η να προσθέτει τα ticks στα checkboxes.

6.

Κώδικας: Επιλογή όλων

if&#40;isSet > 0&#41; &#123;
isSet = 0;
document.getElementById&#40;'message'&#41;.innerHTML = 'Επιλογή Όλων';
&#125; else &#123;
isSet = 1;
document.getElementById&#40;'message'&#41;.innerHTML = 'Απ-επιλογή Όλων' ;
&#125;
&#125;
</script>
Μετά την for loop κάνουμε έναν έλεγχο If(isSet > 0). Αυτό λειτουργεί ακριβός σαν το προηγούμενο έλεγχο if και αλλάζει μέσα στο span tag με το όνομα "message" το κείμενο από "Επιλογή Όλων" σε "Απ-επιλογή Όλων" και το αντίθετο. Αυτή η λειτουργία γίνετε μέσω της εντολής document.getElementById('message') η οποία βρίσκει το span tag με το ID "message" και αλλάζει το περιεχόμενο του με την εντολή innerHTML με το string που του ορίσαμε ( 'Επιλογή Όλων' / 'Απ-επιλογή Όλων' ) . Στο τέλος κλείστε το function και το script του επιλογέα σας είναι έτοιμο.

7.

Κώδικας: Επιλογή όλων

<input type="checkbox" name="Dummy" value="0" onclick="SetUnsetAll&#40;document.checkboxes.list&#41;" /><span id="message">Επιλογή Όλων</span>
Προσθέστε στο τελευταίο checkbox της φόρμας την εντολή: onchange="SetUnsetAll(document.checkboxes.list)" για να εκτελεστεί το script μας.

Αποθηκεύστε το αρχείο στο root του server σας με το όνομα setunsetall.html και ανοίξτε το με τον browser σας. (http://localhost/setunsetall.html). Αν όλα πήγανε καλά κάθε φορά που θα επιλέγετε το τελευταίο check box θα επιλέγονται όλα τα checkboxes και θα αλλάζει το κείμενο στα αριστερά του τελευταίου checkbox.

Ευχαριστούμε που διαβάσατε το tutorial μας. Θα ήμασταν ευγνώμον εάν αφήνατε κάποιο σχόλιο και τυχών προβλήματα και ερωτήσεις.
Τελευταία επεξεργασία από το μέλος petsoukos την 27 Δεκ 2009 01:28, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Tutorial για δυναμικά checkbox με Javascript.

Δημοσίευση από korgr » 24 Δεκ 2009 08:06

Καθαρο και κατανοητο!
Keep on :)

petsoukos
Δημοσιεύσεις: 75
Εγγραφή: 28 Αύγ 2009 02:25
Τοποθεσία: Καστοριά
Επικοινωνία:

Tutorial για δυναμικά checkbox με Javascript.

Δημοσίευση από petsoukos » 24 Δεκ 2009 15:34

Είναι όντος πολύ απλό. Έψαχνα έτοιμο script να κάνω την δουλεία μου αλλά έβρισκα script τα οποία χρειάζονταν 2 buttons για να λειτουργήσουν. (Έλεος...)

Οπότε με λίγη έρευνα έβγαλα το script.

Και ύστερα βρήκα έτοιμο το οποίο το έκανε με ένα button/checkbox X)

dpa
Δημοσιεύσεις: 631
Εγγραφή: 29 Μαρ 2008 13:55

Tutorial για δυναμικά checkbox με Javascript.

Δημοσίευση από dpa » 02 Φεβ 2010 15:55

Παιδιά εγώ έκανα αυτό από το παραπάνω

Κώδικας: Επιλογή όλων

<script type="text/javascript"> 
var isSet = 0;
function SetUnsetAll&#40;CheckPro&#41; &#123;
	for &#40;i = 0; i < CheckPro.length; i++&#41; &#123;
		if&#40;isSet > 0&#41; &#123;
			CheckPro&#91;i&#93;.checked = false ;
        &#125; else &#123;
            CheckPro&#91;i&#93;.checked = true ;
        &#125;
    &#125;
&#125;
</script>
<input type="checkbox" name="Dummy" onchange="SetUnsetAll(document.UpdData)" />

<input type="checkbox" name="CheckPro[]" value="$Product_Code" />

Όπου UpdData το όνομα της φόρμας

Όταν κάνω κλικ τσεκάρονται κανονικά όλα αλλά δεν ξετσεκάρωνται γιατί ????? τι φταίει

Δεν μπορώ να τροποποιήσω το παραπάνω script διότι φτιάχνω κάτι άλλο

Μπορεί κάποιος να μου δείξει πως θα δουλέψει αυτό ?


Ευχαριστώ

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες