如何將數據綁定複選框值爲Javascript對象

我想在JavaScript中爲簡單的表單設置雙向數據綁定。我一直在使用grnadav的databind插件，但一直無法獲得（或多個）複選框值來綁定到對象數組。數據模型，JS約束力和測試輸出功能是如何將數據綁定複選框值爲Javascript對象

// DataBind model 
var model = { 
    title: 'sample', 
    cb: ['option', 'option', 'option'] 
} 

// bind form 
window.onload = function() { 

    DataBind.bind(document.getElementById('form'), model); 

}; 

// log data values 
function sendForm(){ 
    console.log(JSON.stringify(model)); 
    document.getElementById('data').innerHTML = JSON.stringify(model); 
}

的HTML標記是

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Checkbox Test</title> 
</head> 
<body> 
    <table id="form"> 
    <tr> 
     <td>Input</td> 
     <td><input id="title" data-key="title"></td> 
    </tr> 
    <tr> 
     <td>Checkboxes</td> 
     <td> 
     <input name="checkbox-group" data-key="cb[0]" id="in-checkbox1" value="one" type="checkbox"/> 
     <input name="checkbox-group" data-key="cb[1]" id="in-checkbox2" value="two" type="checkbox"/> 
     <input name="checkbox-group" data-key="cb[2]" id="in-checkbox3" value="three" type="checkbox"/> 
     </td> 
    </tr> 
    <tr> 
     <td><pre id="data"></pre></td> 
    </tr> 
    <tr> 
     <td colspan="2"><input type="Button" name="Submit" value="Continue" onclick="sendForm()"></td> 
    </tr> 
    </table> 

    <script src="DataBind.js"></script> 
    ... 
    </body> 
</html>

來源

2016-02-24 mhatch

看來你只能綁定的對象不是數組，嘗試：

var model = { 
 
    title: 'sample', 
 
    cb: [{key:'option'}, {key:'option'}, {key:'option'}] 
 
}; 
 
// bind form 
 
window.onload = function() { 
 
    DataBind.bind(document.getElementById('form'), model); 
 
}; 
 
// log data values 
 
function sendForm(){ 
 
    console.log(JSON.stringify(model)); 
 
    document.getElementById('data').innerHTML = JSON.stringify(model); 
 
}

<script src="https://rawgit.com/grnadav/databind/0.4.x/src/DataBind.min.js"></script> 
 
<table id="form"> 
 
    <tr> 
 
     <td>Input</td> 
 
     <td><input id="title" data-key="title"></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Checkboxes</td> 
 
     <td> 
 
     <input name="checkbox-group" data-key="cb[0].key" id="in-checkbox1" value="one" type="checkbox"/> 
 
     <input name="checkbox-group" data-key="cb[1].key" id="in-checkbox2" value="two" type="checkbox"/> 
 
     <input name="checkbox-group" data-key="cb[2].key" id="in-checkbox3" type="checkbox"/> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td><pre id="data"></pre></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="2"><input type="Button" name="Submit" value="Continue" onclick="sendForm()"></td> 
 
    </tr> 
 
    </table>

您可以在012上添加問題。

來源

2016-02-24 22:01:12 jcubic

我嘗試使用一個對象數組，但是這也沒有工作...更重要的是，我需要的數據結果是一個字符串值的數組，而不是對象。我覺得它應該是可以在代碼中進行合理修改的東西。我只是不知道該怎麼做。 – mhatch

如何將數據綁定複選框值爲Javascript對象

回答

相關問題