修改此功能以顯示所有選中的複選框的值（而不是最後選中的）

我正在複製select/multiselect元素的功能，我試圖使用此函數來顯示已在相關容器。我需要顯示所有在逗號分隔列表中選擇的值，但它目前只顯示一個選擇（最後一個選擇）。它還顯示所選列表項的複選框，背景色等，而不是複選框值（即value="Black"）。修改此功能以顯示所有選中的複選框的值（而不是最後選中的）

我正在使用這個幾個多選表單元素，我無法使用jQuery UI MultiSelect Widget，因爲它們需要以非常特定的方式進行樣式設置（選項與背景顏色或圖像一起顯示並分佈在多個列等）。

以下附上相關的代碼，我已經發布了風格'假' -multiselect元素在這裏的工作示例：http://jsfiddle.net/chayacooper/GS8dM/2/

JS代碼片段

$(document).ready(function() { 
    $(".dropdown_container ul li a").click(function() { 
     var text = $(this).html(); 
     $(".dropdown_box span").html(text); 
    }); 
    function getSelectedValue(id) { 
     return $("#" + id).find("dropdown_box span.value").html(); 
    } 
});

HTML摘錄

<div class="dropdown_box"><span>Colors</span></div> 

<div class="dropdown_container"> 
<ul> 
<li><a href="#"><div style="background-color: #000000" class="color" onclick="toggle_colorbox_alt(this);" title="Black"><div class=CheckMark>&#10003;</div> 
<input type="checkbox" name="color[]" value="Black" class="cbx"/></div>Black</a> 
</li> 
<!-- More list items with checkboxes --> 
</ul> 
</div>

我試過其他的一些方法（包括許多在這裏列出的的：How to retrieve checkboxes values in jQuery），但沒有一個使用隱藏複選框和/或我需要在這些特定表單元素中加入的其他功能。

來源

2013-02-26 Chaya Cooper

良好，變更點擊（..）{..}中的document.ready開始到

$(".dropdown_container ul li a").click(function() { 
    var text = $(this).html(); 
    var currentHtml = $(".dropdown_box span").html(); 
    var numberChecked = $('input[name="color[]"]:checked').length; 
    $(".dropdown_box span").html(currentHtml.replace('Colors','')); 
    if (numberChecked > 1) { 
     $(".dropdown_box span").append(', ' + text); 
     } else { 
     $(".dropdown_box span").append(text); 
    } 
});

這會做的文本權的追加。但是我無法理解代碼中圖像的處理。

更新，以處理剛值：與

var text = $(this).find("input").val();

來源

2013-02-26 07:52:42

這解決了我的第一個問題：-D另一個問題是，不是附加複選框的值（即黑色），而是附加實際複選框，背景顏色等。 – 2013-02-26 08:01:43

@ChayaCooper：更新了答案以處理價值部分。 – 2013-02-26 09:01:34

這正是我所需要的:-D非常感謝你！我稍微修改了你的代碼，以便值以逗號分隔的列表顯示（而不是合併成一個長單詞;-)） – 2013-02-28 19:55:01

更換var text = $(this).html();它可能會更容易只抓的時候被觸發的單擊事件的複選框的所有值，然後將值追加到您的跨度。像http://jsfiddle.net/9w95b/

我也建議不要把<input>標籤放在您的<a>標籤內。

來源

2013-02-26 08:53:52 jungy

修改此功能以顯示所有選中的複選框的值（而不是最後選中的）

回答

相關問題