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

时间:2014-01-06 20:13:39

标签: jquery

我有以下代码:

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

示例: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);

2 个答案:

答案 0 :(得分:0)

简而言之:

//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());
});

(未测试的)

答案 1 :(得分:0)

回答它,这适用于需要此类答案的任何人:

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