如何使用jQuery更新具有多個變量的輸入框或標籤

Question

我在學習jQuery，並且對於熟悉它的人來說可能相當簡單。

應用程序： 使用PHP與jQuery和Bootstrap切換按鈕（http://www.larentis.eu/bootstrap_toggle_buttons/）創建一個動態鏈接地址，具體取決於用戶打開了哪個切換按鈕。

現在，我使用的形式發佈一個曾經的頁面重新加載，然後它拉的POST變量，並將它們連接到鏈路切換按鈕的狀態。

我想這樣做是有當用戶切換按鈕，而不必使用表單發佈的jQuery將自動更改頁面上的鏈接。

我想做什麼就能做的是外行的角度解釋每個撥動按鈕被切換時間：

$link = "http://www.mydomain.com/students.php?view=" 

if jQuery toggle-button-1 = on then add "name" 
if jQuery toggle-button-2 = on then add "id" 
if jQuery toggle-button-3 = on then add "address" 

// If toggle-button-1 and toggle-button-2 were on and toggle-button-3 was off 
// then $views would equal 
$views = "name,id" 

// On the webpage it would then display 

http://www.mydomain.com/students.php?view=name,id 

// If the person toggled toggle-button-1 to off, the link would display: 

http://www.mydomain.com/students.php?view=id 

我希望我已經解釋了這個可以讓你瞭解它...它真的簡單的我想做的事情，我知道如何在PHP中做到這一點，但我覺得我一直在網上尋找應該是簡單的東西，我似乎無法包圍我的頭。

如果有人能幫我出或點我在正確的方向，我將不勝感激！

謝謝！

Answer 1

http://jsfiddle.net/CvsbD/

HTML

<input type="checkbox" class="items" id="one" data-view="name" /> 
<input type="checkbox" class="items" id="two" data-view="id" /> 
<input type="checkbox" class="items" id="three" data-view="address" /> 

<input type="text" id="output" /> 

JS

$("body").on('change', '.items', function(){ 
    // filter down to items that are checked 
    var items = $('.items').filter(function(){ 
     return this.checked; 
    }); 
    // map data values to an array 
    items = items.map(function(){ 
     return $(this).data('view'); 
    }).get(); 

    // join the array with a comma separator 
    $("#output").val(items.join(',')); 
});​ 

請注意，代表結合到文檔身體不是一般去的最佳途徑。您需要使用複選框的更直接的祖先，或者您可以將更改事件綁定到複選框本身。

這可以進一步簡化（忘:checked）像這樣：

$("body").on('change', '.items', function(){ 
    // filter down to items that are checked, and get their data-view value. 
    var items = $('.items:checked').map(function(){ 
     return $(this).data('view'); 
    }).get(); 

    // join the array with a comma separator 
    $("#output").val(items.join(',')); 
});​ 

Answer 2

這是我的上jsFiddle

HMTL

<input type="checkbox" name="name" value="name" id="name" /> name<br /> 
<input type="checkbox" name="id" value="id" id="id" /> id<br /> 
<input type="checkbox" name="address" value="address" id="address" /> address<br /> 
Link: <input type="text" name="url" value="" id="url" /> 

例如JavaScript的

$(function() { 
    var link = "http://jsfiddle.net/mouse0270/chnyy/" 
    $('input[type=checkbox]').change(function() { 
     var viewItems = ""; 
     $('input[type=checkbox]:checked').each(function() { 
      viewItems += ','+$(this).val(); 
     }); 
     $('#url').val(link+'?view='+viewItems.substring(1));     
    });   
});​