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

Question

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

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

这是y段代码:

$(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

Answer 1

一个简单的方法是在复选框更改事件上更改文本框的文本。那么意味着当任何复选框发生更改时，您需要获取每个选中复选框的文本并将其设置为文本框。

$(".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" />