[Resuelto] jquery create checkbox con slider

[gAb1]

Ya tengo algo mas solido, el problema es que no consigo obtener el id del checkbox seleccionado:

Código (jquery) [Seleccionar] Expandir

$('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:

Código (jquery) [Seleccionar] Expandir

$('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...

[EFEX]

Código (javascript) [Seleccionar] Expandir


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

[gAb1]

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.

[EFEX]

No debe pasar eso, solo se resetea si cambias el slider principal, por que recreara los checkbox de nuevo.

[gAb1]

Vale gracias, voy a dar el problema por solucionado (porque ya lo solucionaste hace varios mensajes). Abrire otro para otro problema.

Muchas gracias