Hola buenas!
Estoy creando un formulario un poco complejo y necesito que al cambiar el value de un slider aparezcan checkbox segun el numero del value.
$("#slider").slider({
min: 1,
max: 100,
value: 1,
slide: function( event, ui ) {
$( "#result" ).html( ui.value );
}
});
<div id="slider" class="slider"></div><br>
Cantidad: <span id="result">1</span>
<div data-role="fieldcontain" style="display:none;">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">1</label>
</fieldset>
</div>
¿Como puedo hacer esto? ¿Usando simplemente jquery append para crear los checkboxes?
Gracias!
Por ejemplo.
$("#slider").slider({
min: 1,
max: 30,
value: 1,
slide: function( event, ui ) {
// Numero minimo
var start = 1;
$( "#result" ).html( ui.value );
// Limpiamos los anteriores Checkboxes
$('#showChck').html('');
// Segun el numero, segun la cantidad de Checkboxes
$(new Array(ui.value)).each(function(){
// Agreamos el nuevo checkbox
$('#showChck').prepend(
$('<input/>', {type:"checkbox", name:"checkbox-" + start, id:"checkbox-" + start, class:"custom"}),
$('<label/>', {for: 'checkbox-' + start }).text(start),
$('<br>')
);
// Incrementamos
start++;
});
}
});
...
<!-- Solo agrege un id -->
<fieldset data-role="controlgroup" data-type="horizontal" id="showChck">
<!-- CheckBoxes -->
</fieldset>
...
Muchas gracias! Es justo lo que necesitaba :)
¿Habrá alguna forma de que aparezcan al reves? ¿El número 1 al principio?
Por ultimo tengo que crear un click function para los checkboxes y creen un slider cada uno, ¿como puedo acceder al array de la funcion de arriba? ¿O hay que hacerla de nuevo? La cuestión es acceder al ui.value de #slider...
$("#checkbox-" + start).click(function(){
$("#showSldr").prepend(
$('<div></div>', {id: "slider-" + start, class: "slider", }),
$('Lineas: <span>1</span>', {id: 'result-' + start}).text(start)
);
});
Cambia prepend por append.. sobre los elemento dinamicos utiliza on
// Nota que ahora utilizamos body para que busque en todo el
//contenido DOM segun el selector, en este caso #showChck input.
$('body').on('click', '#showChck input', function() {
console.log('presionado');
// Hacer algo
});
En ves de darle propiedad como id=checkbox-1-2-3..etc, podrias utilizar solo el numero que veo que es lo que quieres utilizar.. la variable start no es una variable global definida.
Estaba pensando en hacer algo como:
var $start = $("#slider").slider('value');
$(new Array($start)).each(function () {
$('body').on('click', '#showChck input', function() {
console.log('presionado');
$("#showSldr").append(
$('<div></div>', {id: $start, class: "slider", }),
$('Lineas: <span>1</span>', {id: 'result-' + $start}).text($start)
);
});
$start++;
});
El slider no tiene para mover y el id siempre es 2... :(
Otro problema es que al darle otra vez al mismo checkbox crea otro en lugar de ocultar.
Es más complicado de lo que creia... :(
No, ponlo separado.. ahora que es lo que quieres hacer exactamente cuando le das click al checkbox?
Cuando se le da click a un checkbox debería crearse un slider ligado al checkbox (al numero id) y si se le vuelve a dar (desmarcarlo) deberia ocultarlo y si se vuelve a marcar mostrarlo (ya esta creado). No se si es posible hacerlo asi, en realidad eso es lo que deberia ocurrir, se podría hacer de la manera mas simple.
No tiene por que estar ligado al checkbox(crear un slider por cada checkbox), de esa forma solo crearias sliders inutiles, con un slider oculto y que tome el valor del checkbox seleccionado basta.
¿De esa manera funcionaria lo que quiero hacer? Por ejemplo, si tengo 10 checkbox y quiero selecionar el tercero se tendria que crear un slider con el id 3 y si seleciono otro, el 7, se crearia otro slider con el id 7.
¿Es posible hacerlo?
Gracias.
haa ahora caigo, si, si es posible, tendria que estar pegado al checkbox por que es una lista desordenada..
Ya tengo algo mas solido, el problema es que no consigo obtener el id del checkbox seleccionado:
$('body').on('click', '#showChck input', function() {
var $id = event.target.id; // ID DEL CHECKBOX
$( "#test" ).val($id);
if ($("#slider-" + $id).length) { // COMPROBAR SI EXISTE
$("#slider-" + $id).fadeToggle();
}
else { // SI NO EXISTE SE CREA
$("#showSldr").append(
$('<div></div>', {id: "slider-" + $id, class: "slider", }),
$('Lineas: <span>1</span>', {id: 'result-' + $id}).text($id)
);
}
});
Ya casi lo tengo! Jejeje
Edito: Me empané! El id del checkbox sera: checkbox-XX y solo necesito el numero... :(
Aunque realmente no me importa que el id del slider sea "slider-checkbox-XX". Mientras funcione me conformo :)
Edito2: Vale ya lo arreglé usando this.id
Ahora necesito saber como puedo inicializarlos, seguramente será justo despues de que se crean habra que añadirlo. Voy a probar.
Edito3: Si que funciona, pero encontre un problema:
Si hay un checkbox activado y mueves el primer slider el activado se desactiva pero el slider sigue visible, y al activarlo se oculta el slider (justo al reves de como debería funcionar).
Asi quedó el código:
$('body').on('click', '#showChck input', function() {
var x = this.id;
var $id = x.replace(/\D/g, '');
if ($("#slider-" + $id).length) {
$("#slider-" + $id).fadeToggle();
$("#result-" + $id).fadeToggle();
}
else {
$("#showSldr").append(
$('<div/>', {id: "slider-" + $id, class: "slider"}),
$('<span/>', {id: 'result-' + $id}).text('4')
);
$("#slider-" + $id).slider({
min: 4,
max: 100,
value: 4,
step: 2,
slide: function( event, ui ) {
$( "#result-" + $id ).html( ui.value );
}
});
}
});
Estoy intentando hacer pruebas a ver si consigo que si el checkbox esta desactivado pero el slider esta visible pues que al activarlo no se oculte por el toggle...
$("body").on("click", "#showChck input", function() {
var x = this.id;
var $id = x.replace(/\D/g, "");
// Obtenemos el slider nuevo
var slider = $("#slider-" + $id);
// El slider no existe?
if (!slider.length) {
// Nota que <span> ira dentro del div, sino
// se complica
var nuevoSlider = $("<div/>", {
id: "slider-" + $id,
"class": "slider"
}).append($("<span/>", {
id: "result-" + $id
}).text("4"));
// Si no existe creamos uno nuevo, nota que
// estamos en la posision sobre el checkbox
// asi que al slider nuevo lo ponemos despues
// de <label>
$(this).next("label").after(nuevoSlider);
nuevoSlider.slider({
min: 4,
max: 100,
value: 4,
step: 2,
slide: function(event, ui) {
$("#result-" + $id).html(ui.value);
}
});
}
// Si el checkbox esta seleccionado, mostramos
// el slider, sino lo ocultamos
if ($(this).is(":checked")) {
slider.show();
} else {
slider.hide();
}
});
Gracias esta funcionando, pero ¿sabes por qué los sliders creados se resetean (el valor) al mover el primer slider? Según la comprobación solo deberían ocultarse.
No debe pasar eso, solo se resetea si cambias el slider principal, por que recreara los checkbox de nuevo.
Vale gracias, voy a dar el problema por solucionado (porque ya lo solucionaste hace varios mensajes). Abrire otro para otro problema.
Muchas gracias :)