复选框更改时添加/删除文本框值

时间:2016-06-24 13:48:10

标签: javascript jquery checkbox textbox

我有以下jquery代码,如果未选中复选框,我想从文本字段中删除值,如果选中则添加。

最初所有值都作为^分隔符出现在文本框中。并选中所有复选框

这是一段代码:

$(document).on('change','._invoice',function() { 
    var mystr = $(this).attr('data-id').is(":checked");
    if(mystr) {
        var returnVal = confirm("Are you sure?");
        $(this).attr("checked", returnVal);
    }    
    });
});

文本字段值,我还想删除分隔符,并在最后添加^作为分隔符的名称。

Robert Berenson^Nancy Foster^Richard Gourhan^LORI HEDMAN^Pui Hoang^Linda Lee^Kristen McDonald^Matthew Miller^Tricia Roland^Terry West

1 个答案:

答案 0 :(得分:0)

一种简单的方法是在复选框更改事件上更改文本框的文本。然后意味着您需要获取每个选中复选框的文本,并在更改任何复选框时将其设置为文本框。

$(".check").change(function(){
    var text = "";
    $(".check:checked").each(function(){ 
        text += text != "" ? "^" : "";
        if ($(this).prop("checked"))
            text += $(this).val();
    });
    $(".text").val(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="check" value="Text1" />
<input type="checkbox" class="check" value="Text2" />
<input type="checkbox" class="check" value="Text3" />
<input type="checkbox" class="check" value="Text4" />
<input type="checkbox" class="check" value="Text5" />
<br/>
<input type="text" class="text" />