JQuery的添加多個檢查行動值（複選框）輸入文字

Question

我有問題頗爲相似javascript-php-add-checkbox-values-to-input-text

還有一對父母複選框，以連續6個孩子複選框。當孩子複選框被選中時，我創建了一個腳本，父複選框將被選中。如果所有6個孩子複選框都被清除，父複選框也會被清除。有沒有什麼方法可以從輸入文本中輸入（並刪除）這些多重檢查動作，因爲目前它只能識別一個點擊的複選框。即時通訊使用最新的jQuery。

http://jsfiddle.net/L33jo3j7/

HTML

<input type="checkbox" name="chkcc5" id="chkGrpSD3" value="sd">SD 
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 1">Kelas 1 
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 2">Kelas 2 
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 3">Kelas 3 
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 4">Kelas 4 
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 5">Kelas 5 
<input type="checkbox" name="chk5[]" class="chkGrpSD3" value="kelas 6">Kelas 6 
<input type="text" name="modelos" /> 

JQuery的

$("input.chkGrpSD3").click(function() { 
    var flag = $('#chkGrpSD3').is(':checked'); 

    if (flag === false) { 
     $('#chkGrpSD3').prop('checked', true); 
    } 

    var noOneChecked = $('input[name="chk5[]"]:checked').length === 0; 
    if (noOneChecked) { 
     $('#chkGrpSD3').prop('checked', false); 
    } 
}); 

$("#chkGrpSD3").click(function() { 
    if (!this.checked) { 
     $('input.chkGrpSD3').prop('checked', false); 
    } 
}); 


$(":checkbox").click(function() { 

    var delimiter = ";"; 
    var checkbox = $(this); 
    var text = $("input[name='modelos']"); 

    if (checkbox.is(":checked")) { 
     text.val(text.val() + checkbox.val() + delimiter) 
    } else { 
     text.val(function() { 
      return $(this).val().replace(checkbox.val() + delimiter, ""); 
     }); 
    } 
}); 

Answer 1

我能夠通過簡化你的邏輯一點點地拿出一個解決方案。在文本框中設置值時，點擊哪個複選框並不重要，因此我們不需要擔心這一點。我們只需要獲取所有選中的複選框並將它們的值放入文本框中。以下jQuery將獲得頁面上所有選中的複選框：$(":checked")。從那裏，你可以取每個值，添加分隔符，並將其附加到文本框的值。這裏是你的提琴的更新版本來說明這一點：

http://jsfiddle.net/jwnace/ed23pkc4/

編輯：爲了清楚起見，這裏是我加入小提琴代碼：

var str = ""; 

// for each checked checkbox, add the checkbox value and delimiter to the textbox 
$(":checked").each(function() { 
    str += $(this).val() + delimiter; 
}); 

// set the value of the textbox 
text.val(str);