Comment lier les données checkbox valeur à l'objet Javascript

Je suis en train de mettre en place une liaison de données bidirectionnelle en Javascript pour un formulaire simple. J'ai utilisé le plugin databind par grnadav, mais j'ai été incapable d'obtenir une (ou plusieurs) valeurs de case à cocher à lier à un tableau d'objets. Le modèle de données, js la liaison et la fonction de sortie de test sontComment lier les données checkbox valeur à l'objet 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); 
}

Le balisage HTML est

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

Source

2016-02-24 mhatch

Il semble que vous ne pouvez lier à des objets non tableaux, essayez:

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>

Vous pouvez ajouter un problème pour cela sur github.

Source

2016-02-24 22:01:12 jcubic

J'ai essayé d'utiliser un tableau d'objets, mais cela ne fonctionnait pas non plus ... Plus important encore, le résultat de données dont j'ai besoin est un tableau de valeurs de chaînes, pas d'objets. Je pense que ce devrait être quelque chose qui peut être raisonnablement modifié dans le code. Je ne suis pas sûr de savoir comment le faire. – mhatch

Comment lier les données checkbox valeur à l'objet Javascript

Répondre

Questions connexes