Question

我有以下代码：

我基本上想要它，如果他们检查一个复选框然后填写其中任何一个的输入，我想在他们点击保存按钮时用文本更新范围文本：

示例: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，这是有效的。只是不确定如何将输入：文本字段包含在其中。

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(' , ');

将复选框值和输入值组合到范围文本区域

2 个答案: