2013-03-18 43 views
0

当复选框值被调整时,我如何更新我的文本框?更新复选框选择上的文本框

例如,如果当复选框1到6被选中,并且3被取消选中时,文本框显示1-6,我希望文本框说1,2,4-6或1,2,4,5,6 。我该如何去做这件事。

这是到目前为止我的代码和我的jsfiddle可以在http://jsfiddle.net/dYsg7/4/发现:

// slider 

$(".slider_weekRange2").slider({ 
    range: true, 
    min: 1, 
    max: 15, 
    step: 1, 
    values: [1, 12], 
    slide: function (event, ui) { 
     $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]); 
     $('input:checkbox[name="weeks_1"]').prop("checked", false); 
     $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true); 
    } 
}); 
$(".search_weekRange2").val($(".slider_weekRange2").slider("values", 0) + 
    "-" + $(".slider_weekRange2").slider("values", 1)); 

// weeks 

    // no weeks 

$('.week_none').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
     $(".search_weekRange2").val(''); 
}); 

     // all week 

$('.week_all').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", true); 
     $(".search_weekRange2").val('1-15'); 
}); 

     // weeks 1-12 

$('.week_term').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]').slice(0, 12).prop("checked", true); 
     $(".search_weekRange2").val('1-12'); 
}); 

     // odd weeks 

$('.week_odd').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]:even').prop("checked", true); 
     $(".search_weekRange2").val('1,3,5,7,9,11,13,15'); 
}); 

     // even weeks 

$('.week_even').click(function() { 
    $('input:checkbox[name="weeks_1"]').prop("checked", false); 
    $('input:checkbox[name="weeks_1"]:odd').prop("checked", true); 
     $(".search_weekRange2").val('2,4,6,8,10,12,14'); 
}); 

回答

3

这是修改后的提琴:http://jsfiddle.net/dYsg7/5/

这是我添加的代码:

$('input:checkbox').click(function() { 
    var s = []; 
    $('input:checkbox').each(function() { 
     if (this.checked) { 
      s.push($(this).next().text()); 
     } 
    }); 
    $(".search_weekRange2").val(s.join(',')); 
}); 

当点击复选框,经过每个复选框,并经过添加它的标签的文本(下一个项目)到数组,如果它被检查。收集所有选中的复选框后,用逗号将它们全部加入,然后将其分配给输出。

0

如何添加一个onchange监听到你的复选框并调用将创建的字符串和更新的复选框的功能?