Question

我有一个典型的html表单，用于将数据发布到数据库。在这种形式中，我想包含具有布尔值的可点击的javascript li元素，如单选按钮。但是如何在提交表单时将其与表单一起发布？我猜我必须用onclick调用一个函数来检查或取消选中一个隐藏的表单元素。我该怎么做？

            <h3 class="text-left">Questions</h3>
        <div class="input-group" style="max-height: 300px;overflow: inherit;">
            <ul class="list-group checked-list-box">

              <li class="list-group-item">Question 1
              <input type="hidden" name="question_1_input"></li>

            </ul>

        </div>

<script>

$（function（）{ $（＆＃39; .list-group.checked-list-box .list-group-item＆＃39;）。each（function（）{

    // Settings
    var $widget = $(this),
        $checkbox = $('<input type="checkbox" class="hidden" />'),
        color = ($widget.data('color') ? $widget.data('color') : "primary"),
        style = ($widget.data('style') == "button" ? "btn-" : "list-group-item-"),
        settings = {
            on: {
                icon: 'glyphicon glyphicon-check'
            },
            off: {
                icon: 'glyphicon glyphicon-unchecked'
            }
        };

    var checkedValues = $("li input[type=checkbox]:checked").map(function () {
        return $(this).val();
    });
    console.log(checkedValues.get());
    $widget.css('cursor', 'pointer');
    $widget.append($checkbox);

    // Event Handlers
    $widget.on('click', function () {
        $checkbox.prop('checked', !$checkbox.is(':checked'));
        $checkbox.triggerHandler('change');
        updateDisplay();
    });
    $checkbox.on('change', function () {
        updateDisplay();
    });


    // Actions
    function updateDisplay() {
        var isChecked = $checkbox.is(':checked');

        // Set the button's state
        $widget.data('state', (isChecked) ? "on" : "off");

        // Set the button's icon
        $widget.find('.state-icon')
            .removeClass()
            .addClass('state-icon ' + settings[$widget.data('state')].icon);

        // Update the button's color
        if (isChecked) {
            $widget.addClass(style + color + ' active');
        } else {
            $widget.removeClass(style + color + ' active');
        }
    }

    // Initialization
    function init() {

        if ($widget.data('checked') == true) {
            $checkbox.prop('checked', !$checkbox.is(':checked'));
        }

        updateDisplay();

        // Inject the icon if applicable
        if ($widget.find('.state-icon').length == 0) {
            $widget.prepend('<span class="state-icon ' + settings[$widget.data('state')].icon + '"></span>');
        }
    }
    init();
});

$('#get-checkget-checked-data').on('click', function(event) {
    event.preventDefault(); 
    var checkedItems = {}, counter = 0;
    $("#check-list-box li.active").each(function(idx, li) {
        checkedItems[counter] = $(li).text();
        counter++;
    });
    $('#display-json').html(JSON.stringify(checkedItems, null, '\t'));
});

}）;

Answer 1

我创建了一个代码，它将表单中的隐藏元素设置为所选li元素的数据值属性：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        .active {
            background-color: #EDEDED;
        }
    </style>
</head>
<body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


    <ul>
        <li class="liElement" data-value="first">First</li>
        <li class="liElement" data-value="second">Second</li>
        <li class="liElement" data-value="third">Third</li>
        <li class="liElement" data-value="fourth">Fourth</li>
    </ul>
    <form action="index.html" method="get">
        <input type="hidden" id="formControl" name="control" value="">
        <button>Submit</button>
    </form>



    <script type="text/javascript">
        $(document).ready(function(){
            var liArr = [];
            var formControl = $("#formControl");

            $(".liElement").click(function(){
                $(this).toggleClass("active");

                var current = $(this).data("value");
                var index = liArr.indexOf(current);
                if (index != -1) {
                    liArr.splice(index, 1);
                } else {
                    liArr.push(current);
                }

                formControl.val(liArr.join('-'));
            });
        });
    </script>

</body>
</html>

使用onclick with <li>添加以形成POST数据

1 个答案: