通過jquery從模態窗體窗口獲取復選框值的值

Question

我在我的 update.php 文件中找不到檢索復選框值的解決方案。

可能是這些語法不正確將數據發送到 update.php 文件？

extralist_text: $editor.find('#extralist_text').val(),

和或

extralist_text：值['extralist_text']，

謝謝你幫助我。

下面是我的簡化代碼：

<!-- MODAL -->
        <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
            <div class="modal-dialog" role="document">
                <form class="modal-content form-horizontal" id="editor">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="editor-title">ADD</h4>
                    </div>
                    <div class="modal-body">
                        <input type="number" id="id" name="id" class="hidden" />
                        <!-- Checkbox Text -->
                        <div class="form-group">
                            <label for="extralist_text" class="col-sm-3 control-label">TEXT</label>
                            <div class="col-sm-9">
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="1" /> Text 1
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="2" checked="checked" />Text 2
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="3" checked="checked" /> Text 3
                                <input type="checkbox" id="extralist_text" name="extralist_text[]" value="4" /> Text 4
                                <!------------------>
                            </div>
                        </div>
                        
                       <!-- Title -->
                        <div class="form-group">
                            <label for="extralist_title" class="col-sm-3 control-label">Title</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="extralist_title" name="extralist_title"  required>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        
        <script>
        /* -------------------------------------- */
            jQuery(function($){
                var $modal = $('#editor-modal'),
                    $editor = $('#editor'),
                    $editorTitle = $('#editor-title'),
                    
                    ft = FooTable.init('#editing-data', {
                        columns: $.get("content/columns.json"),
                        editing: {
                            enabled: true,
                            
                            addRow: function(){
                                $modal.removeData('row');
                                $editor[0].reset();
                                $editorTitle.text('New list');
                                $modal.modal('show');
                            },
        
                            editRow: function(row){
                                var values = row.val();
                                $editor.find('#id').val(values.id);
                                $editor.find('#extralist_text').val(values.extralist_text);
                                $editor.find('#extralist_title').val(values.extralist_title);
                                
                                $modal.data('row', row);
                                $editorTitle.text('list : ' + values.extralist_title);
                                $modal.modal('show');
                            },
                            
                            deleteRow: function(row){
                                if (confirm('Cancel ?')){
                                    var values = row.val();
                                    $.ajax({
                                    url: 'delete.php',
                                    dataType: "json",
                                    data:{id: values.id, select_evenement: values.select_evenement},
                                  success: function(data) {
                                    if (data.return) {
                                    row.delete();
                                        alert(data.message);
                                    } else {
                                        alert(data.message);
                                    }
                                    },
                                    });             
                                }
                            }
                        }
                    });
                    
        
                $editor.on('submit', function(e){
                    if (this.checkValidity && !this.checkValidity()) return;
                    e.preventDefault();
                    var row = $modal.data('row'),
                        values = {
                            id: $editor.find('#id').val(),
                            extralist_text: $editor.find('#extralist_text').val(),
                            extralist_title: $editor.find('#extralist_title').val()
                        };
        
                    if (row instanceof FooTable.Row){
                            $.ajax({
                            url: 'update.php',
                            dataType: "json",
                            cache: false,
                            data:{
                            id: values['id'],
                            extralist_text: values['extralist_text'],
                            extralist_title: values['extralist_title']
                            },
                                  success: function(data) {
                                    if (data.return) {
                                        alert(data.message);
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                  },
                            });             
                        
                        
                    } else {
                            $.ajax({
                            url: 'insert.php',
                            data:{
                            id: values['id'],
                            extralist_text: values['extralist_text'],
                            extralist_title: values['extralist_title']
                            },
                                  success: function(data) {
                                    if (data.return) {
                                        alert(data.message);
                                        location.reload();
                                    } else {
                                        alert(data.message);
                                    }
                                  },
                            });             
                    }
                    $modal.modal('hide');
                });
            });
        </script>

Answer 1

您可以使用each通過迭代通過檢查所有的復選框環和使用得到其數值$(this).val()和存儲相同的一些陣列，這樣就可以很容易地通過該值你的后台頁面。

演示代碼：

 $editor = $('#editor'), $editor.on('submit', function(e) { if (this.checkValidity && !this.checkValidity()) return; e.preventDefault(); var yourArray = []; //loop through all checkboxes which is checked $('#editor input[type=checkbox]:checked').each(function() { yourArray.push($(this).val());//push value in array }); values = { id: $editor.find('#id').val(), extralist_text: yourArray,//pass same extralist_title: $editor.find('#extralist_title').val() }; console.log(values) //your ajax call });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title"> <div class="modal-dialog" role="document"> <form class="modal-content form-horizontal" id="editor"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="editor-title">ADD</h4> </div> <div class="modal-body"> <input type="number" id="id" name="id" class="hidden" value="12" /> <!-- Checkbox Text --> <div class="form-group"> <label for="extralist_text" class="col-sm-3 control-label">TEXT</label> <div class="col-sm-9"> <input type="checkbox" id="extralist_text" name="extralist_text[]" value="1" /> Text 1 <input type="checkbox" id="extralist_text" name="extralist_text[]" value="2" checked="checked" />Text 2 <input type="checkbox" id="extralist_text" name="extralist_text[]" value="3" checked="checked" /> Text 3 <input type="checkbox" id="extralist_text" name="extralist_text[]" value="4" /> Text 4 <!------------------> </div> </div> <!-- Title --> <div class="form-group"> <label for="extralist_title" class="col-sm-3 control-label">Title</label> <div class="col-sm-9"> <input type="text" class="form-control" id="extralist_title" name="extralist_title" required> </div> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </div> </form> </div> </div>