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

Question

but the value is only displayed when I click on the checkbox and it does not display the pre-selected values, I want it to show the selected results even if I do not click the checkbox, please correct this code Help me or give me some example code so I can add, thank you!

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

This is demo : https://anifast.com/includes/test.php , I want to not need to click the checkbox and still display the checked results

Answer 1

Use this code and don't forget to use jquery library.

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

You have 2 ways of doing it:

1. you update the input field from your PHP and MySQL to have the checked="checked" on the selected input fields and the run the function on load:

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"/>

2. if you want to update the input field using the $('#theloai1').prop('checked', true); , you should change it so that it also triggers the onchanged event on the input field like this:

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

NOTES

1. this code is not tested, but it should work

2. make sure you write valid HTML otherwise you might get unexpected results (I fixed your HTML as well)

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');
    }
})