如何使用 Javascript 或 Jquery 检查复选框值并显示到输入元素？

Question

但该值仅在我单击复选框时显示并且它不显示预先选择的值，即使我不单击复选框，我也希望它显示选定的结果，请更正此代码帮助我或给我一些示例代码，我可以添加，谢谢！

<script type="text/javascript">
    function thayTheLoai() {
        var huunhan_theloai = [];
        $.each($("input[type='checkbox']:checked"), function() {
            huunhan_theloai.push($(this).val());
        });
        document.getElementById("input").value = huunhan_theloai.join(", ");
    }
</script>
<label for="default" onclick="thayTheLoai();" class="btn btn-default">
    <input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
</label>
<input id="input" type="text"></input>

<script>
    $('#theloai1').prop('checked', true);
</script>

这是演示：https://anifast.com/includes/test.php，我希望不需要单击复选框并仍然显示检查结果

Answer 1

使用此代码，不要忘记使用 jquery 库。

$(document).ready(function(){
    $('#theloai1').prop('checked', true);
    var huunhan_theloai = [];
    $.each($("input[type='checkbox']:checked"), function() {
        huunhan_theloai.push($(this).val());
    });
    document.getElementById("input").value = huunhan_theloai.join(", ");
})


function thayTheLoai() {
    if ($('input[name="theloai[]"]:checked').length > 0) {
        $("#input").val(1);
    }else{
        $("#input").val(0);
    }
}

Answer 2

你有两种方法：

1. 您从 PHP 和 MySQL 更新输入字段以在所选输入字段上添加 checked="checked" 并在加载时运行函数：

JS

function thayTheLoai() {
    var huunhan_theloai = [];
    $.each($("input[type='checkbox']:checked"), function() {
        huunhan_theloai.push($(this).val());
    });
    $('#input').val( huunhan_theloai.join(", ") );
}

$(document).ready(function(){
    thayTheLoai();
});

HTML

<label for="theloai1" onclick="thayTheLoai();" class="btn btn-default">
    <input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" />
</label>
<label for="theloai2" onclick="thayTheLoai();" class="btn btn-default">
    <input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" checked="checked" />
</label>
<input id="input" type="text"/>

1. 如果您想使用$('#theloai1').prop('checked', true); 更新输入字段，您应该更改它，以便它也触发输入字段上的onchanged 事件，如下所示：

$('#theloai1').prop('checked', true).trigger('change');

注意事项

1. 此代码未经测试，但应该可以工作

2. 确保您编写了有效的 HTML，否则您可能会得到意想不到的结果（我也修复了您的 HTML）

Answer 3

<label for="default" class="btn btn-default">
<input type="checkbox" value="1" id="theloai1" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="2" id="theloai2" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="3" id="theloai3" class="badgebox" name="theloai[]" ></input>
<input type="checkbox" value="4" id="theloai4" class="badgebox" name="theloai[]" ></input>

</label>
<input id="input" type="text"></input>



$(document).ready(function(){
    $('#theloai1').prop('checked', true);
    var huunhan_theloai = [];
    $.each($("input[type='checkbox']:checked"), function() {
        huunhan_theloai.push($(this).val());
    });
    document.getElementById("input").value = huunhan_theloai.join(", ");
})

$("input[type='checkbox']").on("change", function(){
    checked_id = $(this).attr("id");
    if ($(this).prop("checked") == true) {
        $("input[type='checkbox']").each(function(){
            if ($(this).attr("id") != checked_id) {
                $(this).prop("checked", false);
            }
        })
        $("#input").val($(this).val());
    }else{
        $("#input").val('some default value');
    }
})