在 JQuery 中將復選框值傳遞為 JSON

Question

我需要 console.log 復選框的值作為 JSON object。 我是 Javascript 和 Jquery 的新手，因此將不勝感激。 我有以下代碼：

 jQuery(document).ready(function() { jQuery("input[type='button']").click(function() { var doorType = []; jQuery.each(jQuery("input[name='app']:checked"), function() { doorType.push(jQuery(this).val()); }); jQuery.each(jQuery("input[name='app-sol']:checked"), function() { doorType.push(jQuery(this).val()); }); console.log(doorType.join(", ")); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <h4>Тип дверей:</h4> <label><input class="derevo-app" type="radio" value="derevo" name="app"> Дерево</label> <label><input class="metal-app" type="radio" value="metal" name="app"> Метал</label> <label><input class="pvh-app" type="radio" value="pvh" name="app"> ПВХ</label> <label><input class="sklo-app" type="radio" value="sklo" name="app"> Скло</label> <h4>Продукція:</h4> <label><input class="zamky-app" type="checkbox" value="zamky" name="app"> Замки</label> <label><input class="cylindry-app" type="checkbox" value="cylindry" name="app"> Циліндри</label> <label><input class="dostup-app" type="checkbox" value="dostup" name="app"> Контроль доступа</label> <label><input class="antipanic-app" type="checkbox" value="antipanic" name="app"> Антипаніка</label> <label><input class="dovodchyk-app" type="checkbox" value="dovodchyk" name="app"> Доводчики</label> <h4>Рішення:</h4> <label><input class="elektronne-app" type="radio" value="elektronne" name="app-sol"> Електронне</label> <label><input class="mexanichne-app" type="radio" value="mexanichne" name="app-sol"> Механічне</label> <h4>Відеокамери:</h4> <label><input class="vnutr-app" type="checkbox" value="vnutr" name="app"> Внутрішні</label> <label><input class="zovn-app" type="checkbox" value="zovn" name="app"> Зовнішні</label> <br> <input type="button" value="ПРОДОВЖИТИ"> </form>

Answer 1

您需要將doorType變量聲明移到事件處理程序之外，以便它在 function 調用中保留其值，然后使用JSON.stringify()將您的數組轉換為 Z0ECD11C1D7A287401D148A23BBD

 $(function() { var doorType = []; // Must be outside of click event handler $("input[type='button']").click(function() { $.each(jQuery("input[name='app']:checked"), function() { doorType.push(jQuery(this).val()); }); jQuery.each(jQuery("input[name='app-sol']:checked"), function() { doorType.push(jQuery(this).val()); }); console.log(JSON.stringify(doorType)); // JSON.stringify() does the job. }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <h4>Тип дверей:</h4> <label><input class="derevo-app" type="radio" value="derevo" name="app"> Дерево</label> <label><input class="metal-app" type="radio" value="metal" name="app"> Метал</label> <label><input class="pvh-app" type="radio" value="pvh" name="app"> ПВХ</label> <label><input class="sklo-app" type="radio" value="sklo" name="app"> Скло</label> <h4>Продукція:</h4> <label><input class="zamky-app" type="checkbox" value="zamky" name="app"> Замки</label> <label><input class="cylindry-app" type="checkbox" value="cylindry" name="app"> Циліндри</label> <label><input class="dostup-app" type="checkbox" value="dostup" name="app"> Контроль доступа</label> <label><input class="antipanic-app" type="checkbox" value="antipanic" name="app"> Антипаніка</label> <label><input class="dovodchyk-app" type="checkbox" value="dovodchyk" name="app"> Доводчики</label> <h4>Рішення:</h4> <label><input class="elektronne-app" type="radio" value="elektronne" name="app-sol"> Електронне</label> <label><input class="mexanichne-app" type="radio" value="mexanichne" name="app-sol"> Механічне</label> <h4>Відеокамери:</h4> <label><input class="vnutr-app" type="checkbox" value="vnutr" name="app"> Внутрішні</label> <label><input class="zovn-app" type="checkbox" value="zovn" name="app"> Зовнішні</label> <br> <input type="button" value="ПРОДОВЖИТИ"> </form>

Answer 2

您需要使用JSON.stringify(doorType) 。 而且，正如 Chris 所提到的，您不能使用相同的名稱。