如何使用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

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

2. 如果要使用$('#theloai1').prop('checked', true);更新輸入字段$('#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');
    }
})