In my form I have several checkboxes. All selected checkbox values should be written in firebase database. However, cannot manipulate the checkboxes. My code does not take the checkbox values. It does not appear on firebase. My form looks like this [![Form][1]][1] [1]: https://i.stack.imgur.com/8FEN4.png

HTML Code

 <td>
                            <label>
                                <input  id = "paint" value="Anti-Fungus Paint" type="checkbox" unchecked> Anti-Fungus Paint
                            </label>
                            <label>
                                <input  id = "paint" value="Emulsion Paint" type="checkbox" unchecked> Emulsion Paint
                            </label>
                            <label>
                                <input  id = "paint" value="Anti-Corrosive Paint" type="checkbox" unchecked> Anti-Corrosive Paint
                            </label>
                            <label>
                                <input  id = "paint" value="All in one Paint" type="checkbox" unchecked> All in one Paint
                            </label>
                        </td>

Javasript

document.getElementById('formBid').addEventListener('submit',function(e){
            e.preventDefault();
            var id=Date.now();  //generating a unqiue id
            set(ref(db,'quotes/'   id),{
               paint:document.querySelectorAll('input[id="paint"]:checked'),
              
            });
            alert('Quote Sent To Client');
            formBid.reset();

CodePudding user response：

first, you should difference the id of each checkbox, the id should be unique to make it works. I usually use getElementById to get each value because it's easier for me.