Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    MooTools: aggiungere classe a una label corrispondente al radio button selezionato

    Buona sera a tutti,
    Ho un form con tre radio buttons: vero, forse, falso.

    Quello che voglio è
    1) Mostrare la label invece del radio button;
    2) Aggiungere la classe "checked" alla label corrispondente al radio button selezionato dall'utente.

    Buona parte dello script l'ho scopiazzata da un altro script.

    Il punto 1 sono riuscito a realizzarlo.
    Il punto 2 mi sta dando problemi. Ovviamente sono script di prova, perché non conosco JS né tantomeno MooTools e sto cercando di impararli.

    Quello che ho scritto fino ad ora è questo

    IL FORM
    codice:
    <form id="answer-release" name="answer-release" action="answer.php" method="post">
       <div id="answer">
          <fieldset id="jform_answer" class="radio required">
             <input type="radio" id="jform_answer0" name="jform[answer]" value="-1" class="answer false"/>
             <label for="jform_answer0" class="answer false">Falso</label>
    			
             <input type="radio" id="jform_answer1" name="jform[answer]" value="0" class="answer maybe"/>
             <label for="jform_answer1" class="answer maybe">Può darsi</label>
    			
             <input type="radio" id="jform_answer2" name="jform[answer]" value="1" class="answer true"/>
             <label for="jform_answer2" class="answer true">Vero</label>
          </fieldset>
       </div>
    </form>
    IL JAVASCRIPT
    codice:
    var answer = new Class({
    
    	Implements: [Options, Events],
    	
    	options: {
    		form: null,
    		radios: null,
    		selector: ''
    	},
    	
    	initialize: function(options) {
    		// Set options
    		this.setOptions(options);
    		
    		// To build radio selector
    		var formQuery = this.options.form;
    		
    		// Get the form object
    		this.options.form = $(formQuery);
    		
    		// TODO: what does this do?
    		if(!this.options.form) this.options.form = $$('form[name=' + formQuery + "]")[0];
    		
    		// Selector building
    		if (this.options.form) {
    			var uniqueId = 'answer_' + String.uniqueID();
    			this.options.form.addClass(uniqueId);
    			this.options.selector += 'form.' + uniqueId + ' '; }
    			
    		// The selector
    		this.options.selector += 'input[type=radio][name=' + this.options.radios + "]";
    		
    		$$(this.options.selector).each(function (item) {
    			
    			// Hide answers checkboxes
    			item.setStyle('display','none');
    			
    			
    			// Click event
    			item.addEvent('click', function () {
    				if(item.checked == true) {
    					$$('label.answer').each(function(label){
    						if(label.htmlFor == item.get('id')) {
    							label.addClass('checked');
    						} else {
    							label.removeClass('checked');
    						}
    					});
    				}
    			}); 
    		});
    	}
    });
    Nella pagina richiamo lo script in questo modo
    codice:
    window.addEvent("domready",function(){
    		
    	// Create an instance of Answer
    	var	answer = new answer({
    		form:          "answer-release",
    		radios:        "jform[answer]"
    	});
    	
    	// Listen for star clicks
    	answer.addEvent("click", function(value) {
    		new Request.send({
    			url: "answer.php",
    			data: {answer: value, postId: postId }
    		});
    	});
    });
    È la parte del click che non riesco a gestire correttamente. Non ricevo nemmeno alcun tipo di errore. So che addEvent funziona perchè se dentro ci metto un alert riesco a farlo attivare col click. Però non riesco ad aggiungere la classe.
    Qualcuno è in grado di mettermi sulla strada giusta?

    Grazie mille
    eCommerceRS.NET - Commerciante, vendi on-line!
    Il mio nick è mircov e non mirco!!!

  2. #2
    Piccolo update

    In realtà controllando meglio lo script funziona: oltre a non dare errori correttamente aggiunge e rimuovce la classe checked dall'elemento label corrispondente al radio button selezionato.

    Però non aggiorna lo stile presente nel css: come mai?
    eCommerceRS.NET - Commerciante, vendi on-line!
    Il mio nick è mircov e non mirco!!!

  3. #3
    Me la sono suonata e me la sono cantata: problema risolto... ed era un problema di CSS, non di javascript...
    eCommerceRS.NET - Commerciante, vendi on-line!
    Il mio nick è mircov e non mirco!!!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.