創建複選框從值和滑塊點擊

我需要從滑塊創建複選框，該值將是創建的複選框的數量。每個複選框將創建一個滑塊onclick，並且滑塊還必須打印該值才能知道它。創建複選框從值和滑塊點擊

我不知道如何創建第一個滑塊，但我找到了一種方法使用jQuery：

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

與滑塊的DIV是：

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

的複選框應在一組：

<div data-role="fieldcontain"> 
    <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>

我就可以創建使用jQuery方法追加元素，但我真的不蘇關於如何處理其餘的事件。我需要一些幫助。

謝謝！

來源

2015-05-21 Chazy Chaz

'從slider'你應該在問題提到這個插件滑塊提供並可靠地檢查有關DOC。 –

聽起來像一個循環引用...複選框創建滑塊和滑塊創建複選框。真的不清楚你想要做什麼 – charlietfl

有一個滑塊，這會創建複選框，並創建滑塊。聽起來不好？：P編輯：呃...實際上第一個滑塊不會創建任何東西，它是創建複選框的值編號。 –

完成。

此創建複選框：

$("#slider").slider({ 
    min: 1, 
    max: 30, 
    value: 1, 
    slide: function(event, ui) { 
    // Min num 
    var start = 1; 

    $("#result").html(ui.value); 
    // Clear the div 
    $('#showChck').html(''); 

    // Array to create the checkboxes 
    $(new Array(ui.value)).each(function() { 

     // Add the new checkbox 
     $('#showChck').prepend(
     $('<input/>', {type: "checkbox", name: "checkbox-" + start, id: "checkbox-" + start, class: "custom", title: "Cambiar los canales que tendrá la linea: " + start}), 
     $('<label/>', {for: 'checkbox-' + start }).text(start) 
    ); 

     // Increase 
     start++; 
    }); 
    } 
});

這創造滑塊：

$('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", title: "Estos son los canales que tendrá la linea: " + $id}), 
      $('<span/>', {id: 'result-' + $id}).text($id) 
     ); 
     $("#slider-" + $id).slider({ 
      min: 4, 
      max: 100, 
      value: 4, 
      step: 2, 
      slide: function(event, ui) { 
       $("#result-" + $id).html(ui.value); 
      } 
     }); 
    } 
});

來源

2015-05-22 02:23:16

創建複選框從值和滑塊點擊

回答

相關問題