如何在Bootstrap Modal中正确使用.val()设置单选框、复选框取值（PHP MySQL场景）

问题原因 #

jQuery的.val()方法仅适合直接给文本框、下拉框等常规表单元素赋值，单选框、复选框的选中状态由checked属性控制，直接对元素调用.val()无法触发选中效果，这就是你Modal里没有展示选中值的核心原因。

具体修改方案 #

你需要把原有代码中给#tag、#bahasa赋值的两行替换为对应单选、复选框的选中逻辑，注意选择器要和你实际HTML中表单元素的name属性匹配：

1. 单选框（bahasa字段）处理 #

假设你页面上语言单选框的name属性为bahasa，代码如下：

// 先重置所有同name单选框为未选中
$('input:radio[name="bahasa"]').prop('checked', false);
// 匹配对应值的单选框设为选中
$('input:radio[name="bahasa"]').filter(`[value="${bahasa}"]`).prop('checked', true);
// 如果是Bootstrap自定义样式的单选框，加trigger触发样式更新
// .prop('checked', true).trigger('change')

2. 复选框（tag字段）处理 #

如果你的tag是多个值的数组，或者是逗号分隔的字符串，处理逻辑如下：

// 先重置所有同name复选框为未选中
$('input:checkbox[name="tag[]"]').prop('checked', false);
// 如果tag是逗号分隔的字符串，先转成数组
const tagArr = Array.isArray(tag) ? tag : tag.split(',');
// 遍历匹配每个值的复选框设为选中
tagArr.forEach(item => {
  $(`input:checkbox[name="tag[]"][value="${item}"]`).prop('checked', true);
  // 同理Bootstrap自定义样式加.trigger('change')
});

修改后完整代码 #

<script>
$(document).on("click", "#tombolUbah", function() {
    let id = $(this).data('id');
    let judul = $(this).data('judul');
    let penulis = $(this).data('penulis');
    let tahun = $(this).data('tahun');
    let deskripsi = $(this).data('deskripsi');
    let gambar = $(this).data('gambar');
    let tag = $(this).data('tag');
    let bahasa = $(this).data('bahasa');

    $("#id_buku").val(id);
    $("#judul_buku").val(judul);
    $("#penulis_buku").val(penulis);
    $("#tahun_terbit").val(tahun);
    $("#deskripsi").val(deskripsi);
    $("#gambar").val(gambar);

    // 替换原有赋值逻辑，注意修改name属性为你实际的值
    // 单选框处理
    $('input:radio[name="bahasa"]').prop('checked', false);
    $('input:radio[name="bahasa"]').filter(`[value="${bahasa}"]`).prop('checked', true);

    // 复选框处理
    $('input:checkbox[name="tag[]"]').prop('checked', false);
    const tagArr = Array.isArray(tag) ? tag : tag.split(',');
    tagArr.forEach(item => {
        $(`input:checkbox[name="tag[]"][value="${item}"]`).prop('checked', true);
    });
})
</script>

注意事项 #

• 代码中name="bahasa"、name="tag[]"需要替换为你实际HTML中单选框、复选框对应的name属性值
• 如果你使用的是Bootstrap自定义样式的表单控件，在设置checked属性后加上.trigger('change')即可同步更新UI样式

内容的提问来源于stack exchange，提问作者TaeCool 's