[Resuelto] jquery create checkbox con slider

[gAb1]

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.

Código (jquery) [Seleccionar] Expandir

$("#slider").slider({
min: 1,
max: 100,
value: 1,
slide: function( event, ui ) {
$( "#result" ).html( ui.value );
}
});


Código (html5) [Seleccionar] Expandir

<div id="slider" class="slider"></div><br>
Cantidad: <span id="result">1</span>

Código (html5) [Seleccionar] Expandir

<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!

[EFEX]

Por ejemplo.

Código (javascript) [Seleccionar] Expandir


$("#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++;
    });
  }
});

Código (html4strict) [Seleccionar] Expandir


...
<!-- Solo agrege un id -->
<fieldset data-role="controlgroup" data-type="horizontal" id="showChck">
  <!-- CheckBoxes -->
</fieldset>
...

[gAb1]

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...

Código (jquery) [Seleccionar] Expandir

$("#checkbox-" + start).click(function(){
    $("#showSldr").prepend(
        $('<div></div>', {id: "slider-" + start, class: "slider", }),
        $('Lineas: <span>1</span>', {id: 'result-' + start}).text(start)
    );
});

[EFEX]

Cambia prepend por append.. sobre los elemento dinamicos utiliza on

Código (javascript) [Seleccionar] Expandir


// 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.

[gAb1]

Estaba pensando en hacer algo como:

Código (jquery) [Seleccionar] Expandir

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...

[EFEX]

No, ponlo separado.. ahora que es lo que quieres hacer exactamente cuando le das click al checkbox?

[gAb1]

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.

[EFEX]

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.

[gAb1]

¿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.

[EFEX]

haa ahora caigo, si, si es posible, tendria que estar pegado al checkbox por que es una lista desordenada..