Layui表單賦初值之 checkbox

問題來源

上回書說到，Layui 在提交表單時對 checkbox 進行驗證，這次依舊是 checkbox，跟它杠上了。
在網頁中有很多時候會用到表單賦初值，Layui 給我們提供了非常便利的方法： form.val()，但是，這個方法是有一定局限的，例如在使用這個方法給 checkbox 賦初值時就沒有成功（至少我沒有），但是我又需要用到，Google 也沒找到覺得合適的答案，大多數都說這個需要自行擴展，所以...

解決方法

毫無疑問，最終還是自行擴展，代碼：

(假設 HTML 代碼還是上一篇文章寫到的代碼，不知道？沒關系，Link: Layui提交表單時驗證必選的多選框是否有選中)

// 假設 data 是后台獲取的值，數組中的值是與 checkbox 的 value 對應的
let data = [1, 2, 3, 4];
$.each(data, (v) => {
    // 獲取 type 為 checkbox，name 以 test 開關，value 為 v 的元素
    let node = $(`input[type="checkbox"][name^="test"][value="${v}"]`);
    if (node && node.length) {
        // 如果元素存在，使其選中
        node[0].checked = true;
        // 這個不能忘了
        form.render();
    }
});

注意

1. 在獲取元素的時候，要使用 [attribute^=value] 選擇器 The [attribute^=value] 選擇器匹配元素屬性值帶指定的值開始的元素。
2. form.render() 不能忘了，我們在使用 Layui 進行布局時，看到的 checkbox 和 radio 已經不是真實的了 (>_<)。