如何根据复选框更改文本框的值

时间:2016-12-25 11:51:46

标签: jquery checkbox

我根据检查文本框中的文本更改的复选框制作了5个复选框。但是可以同时检查所有复选框。我希望一次只能检查一个复选框。

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

1 个答案:

答案 0 :(得分:0)

我不是JS专家所以我愿意接受建议,编辑,评论,澄清......

我们的想法是禁用其他复选框,并将所选值附加到文本框中。

var text = "";
// text += text != "" ? "^" : "";
$('.check').click(function() {
    var $inputs = $('.check');
    if ($(this).is(':checked')) {
        $inputs.not(this).prop('disabled', true);
        if ($(this).prop("checked")) {
            if (text !== "") {
                text += "^";
            }
            text += $(this).val();
            $(".text").val(text);
        }
    } else {
        $inputs.prop('disabled', false);
    }
})
<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" />