將復選框值和輸入值合並到一個跨度文本區域

Question

我有以下代碼：

我基本上想要它，如果他們選中一個復選框，然后在其中任何一個上填寫輸入，我想在他們點擊保存按鈕時用文本更新跨度文本：

范例:05| 33%, :15| 33%, :60| 34% :05| 33%, :15| 33%, :60| 34%

在上面的示例中，用戶選中了：05，：15和：60復選框，僅輸入了這些數字。

<div class="span5 lengthcontainer">
        <label class="control-label">Lengths:</label>
        <div class="row day-selection">
          <input name="" type="checkbox" value=":05" class="LCheckbox" id="05Checkbox" >
          <label>:05&nbsp;&nbsp;&nbsp;</label>
          <input name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":10" class="LCheckbox">
          <label>:10&nbsp;&nbsp;&nbsp;</label>
          <input id="10Input" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":15" class="LCheckbox" >
          <label>:15&nbsp;&nbsp;&nbsp;</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span> </div>
        <div class="row day-selection">
          <input name="" type="checkbox" value=":30" class="LCheckbox" >
          <label>:30&nbsp;&nbsp;&nbsp;</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":60" class="LCheckbox" >
          <label>:60&nbsp;&nbsp;&nbsp;</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span>
          <input name="" type="checkbox" value=":60+" class="LCheckbox">
          <label>:60+</label>
          <input id="textinput" name="textinput" type="text" class="input-mini-length LInput" disabled>
          <span>%</span> </div>
      </div>

抱歉：這是我用來獲取復選框值的jquery，它可以正常工作。 只是不確定如何在其中包括input：text字段。

var tempLengthValue='';
tempLengthValue=$('.lengthcontainer  input:checkbox').map(function(n){
    if(this.checked){
        return  this.value;
        }
        ;}).get().join(' , ');
 $('#Length-lbl').html(tempLengthValue);

Answer 1

簡而言之：

//Enable the textbox
$(":checkbox").change(function() {
    $(this).nextUntil(":text").prop("disabled", !this.checked);
});

$(":text").change(function() {
    var radio = $(this).prevUntil(":checkbox").val();
    $(this).next("span").text(radio + "| " + $(this).text());
});

（未經測試）

Answer 2

回答了，這是給需要這種答案的任何人的：

var tempLengthValue='';
tempLengthValue=$('.lengthcontainer  input:checkbox').map(function(n){
    if(this.checked){
        return  this.value + ' @ ' + $(this).parent().children('input:text').val() +    '%';
        }
        ;}).get().join(' , ');