如何獲得使用find（）函數選擇器獲得的單選輸入值

Question

我嘗試從children元素獲取值，即每個孩子（項目）都具有相同name輸入字段。 為此，我使用了each（）函數。 我從單選輸入檢索值時遇到問題，我從原本不應輸入的值中獲取問題。 這里的代碼

<div class="accordion" id="menu-ui-sortable" role="tablist" aria-multiselectable="true">
    <div class="panel menu-item">
        <a class="panel-heading collapsed" role="tab" id="heading-menu-item-1" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-1" aria-expanded="false" aria-controls="menu-item-settings-1">
            <h4 class="panel-title">Menu Item 1</h4>
            <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
            <i class="item-type pull-right">Halaman Web</i>
        </a>

        <input type="hidden" name="menu_item_type" value="page"/>
        <input type="hidden" name="menu_item_page_id" value="12"/>
        <input type="hidden" name="menu_item_content_id" value=""/>
        <input type="hidden" name="menu_item_url" value="www.example.com/page-12"/>

        <div id="menu-item-settings-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-1">
            <div class="panel-body">
                <label>Label Navigasi</label>
                <input type="text" class="form-control" name="menu_item_title" value="label 1"/>

                <label>Atribut Judul</label>
                <input type="text" class="form-control" name="menu_item_attr_title" value="attr 1"/>

                <p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1" checked=""> Buka tautan di tab baru</label></p>

                <label>CSS Classes/Icon</label>
                <input type="text" class="form-control" name="menu_item_classes" value="fa fa-glass"/>

                <label>Letak CSS Classes/Icon</label>
                <div class="radio">
                    <label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
                    <label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
                </div>

                <label class="move-button-handle">
                    <span>Pindahkan: </span>
                    <a href="#" class="a-link menus-move menus-move-up" data-dir="up">Naik Satu</a>
                    <a href="#" class="a-link menus-move menus-move-down" data-dir="down">Turun Satu</a>
                    <a href="#" class="a-link menus-move menus-move-top" data-dir="top">Urutan Pertama</a>
                    <a href="#" class="a-link menus-move menus-move-bottom" data-dir="top">Urutan Terakhir</a>
                </label>

                <div class="menu-item-actions submitbox">
                    <p class="link-to-original">Asli: <a class="a-link" href="http://wordpress.dev/new-page-page/">new page page</a></p>
                    <a class="item-delete danger-highlight" href="#">Hapus</a><span> | </span>
                    <a class="item-cancel" href="#">Cancel</a>
                </div>
            </div>
        </div>
    </div>

    <div class="panel menu-item">
        <a class="panel-heading collapsed" role="tab" id="heading-menu-item-2" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-2" aria-expanded="false" aria-controls="menu-item-settings-2">
            <h4 class="panel-title">Menu Item 2</h4>
            <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
            <i class="item-type pull-right">Homepage Content</i>
        </a>

        <input type="hidden" name="menu_item_type" value="homepage-content"/>
        <input type="hidden" name="menu_item_page_id" value=""/>
        <input type="hidden" name="menu_item_content_id" value="4"/>
        <input type="hidden" name="menu_item_url" value="#content-4"/>

        <div id="menu-item-settings-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-2">
            <div class="panel-body">
                <label>Label Navigasi</label>
                <input type="text" class="form-control" name="menu_item_title" value="label 2"/>

                <label>Atribut Judul</label>
                <input type="text" class="form-control" name="menu_item_attr_title" value="attr 2"/>

                <p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>

                <label>CSS Classes/Icon</label>
                <input type="text" class="form-control" name="menu_item_classes" value="fa fa-search"/>

                <label>Letak CSS Classes/Icon</label>
                <div class="radio">
                    <label><input type="radio" name="menu_item_classes_position" value="left"> Sebelah kiri label</label>
                    <label><input type="radio" name="menu_item_classes_position" value="right" checked=""> Sebelah kanan label</label>
                </div>

                <label class="move-button-handle">
                    <span>Pindahkan: </span>
                    <a href="#" class="a-link menus-move menus-move-up" data-dir="up">Naik Satu</a>
                    <a href="#" class="a-link menus-move menus-move-down" data-dir="down">Turun Satu</a>
                    <a href="#" class="a-link menus-move menus-move-top" data-dir="top">Urutan Pertama</a>
                    <a href="#" class="a-link menus-move menus-move-bottom" data-dir="top">Urutan Terakhir</a>
                </label>

                <div class="menu-item-actions submitbox">
                    <a class="item-delete danger-highlight" id="delete-2" href="#">Hapus</a><span> | </span>
                    <a class="item-cancel" id="cancel-2" href="#">Cancel</a>
                </div>
            </div>
        </div>
    </div>

    <div class="panel menu-item">
        <a class="panel-heading collapsed" role="tab" id="heading-menu-item-3" data-toggle="collapse" data-parent="#menu-ui-sortable" href="#menu-item-settings-3" aria-expanded="false" aria-controls="menu-item-settings-3">
            <h4 class="panel-title">Menu Item 3</h4>
            <i class="indicator glyphicon glyphicon-chevron-down pull-right"></i>
            <i class="item-type pull-right">Tautan Tertentu</i>
        </a>

        <input type="hidden" name="menu_item_type" value="custom-link"/>
        <input type="hidden" name="menu_item_page_id" value=""/>
        <input type="hidden" name="menu_item_content_id" value=""/>

        <div id="menu-item-settings-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-menu-item-3">
            <div class="panel-body">
                <label>URL</label>
                <input type="text" class="form-control" name="menu_item_url" value="www.example.com"/>

                <label>Label Navigasi</label>
                <input type="text" class="form-control" name="menu_item_title" value="label 3"/>

                <label>Atribut Judul</label>
                <input type="text" class="form-control" name="menu_item_attr_title" value="attr 3"/>

                <p class="menu_item_target"><label><input type="checkbox" name="menu_item_target" value="1"> Buka tautan di tab baru</label></p>

                <label>CSS Classes/Icon</label>
                <input type="text" class="form-control" name="menu_item_classes" value="fa fa-files"/>

                <label>Letak CSS Classes/Icon</label>
                <div class="radio">
                    <label><input type="radio" name="menu_item_classes_position" value="left" checked=""> Sebelah kiri label</label>
                    <label><input type="radio" name="menu_item_classes_position" value="right"> Sebelah kanan label</label>
                </div>

                <label class="move-button-handle">
                    <span>Pindahkan: </span>
                    <a href="#" class="a-link menus-move menus-move-up" data-dir="up">Naik Satu</a>
                    <a href="#" class="a-link menus-move menus-move-down" data-dir="down">Turun Satu</a>
                    <a href="#" class="a-link menus-move menus-move-top" data-dir="top">Urutan Pertama</a>
                    <a href="#" class="a-link menus-move menus-move-bottom" data-dir="top">Urutan Terakhir</a>
                </label>

                <div class="menu-item-actions submitbox">
                    <a class="item-delete danger-highlight" id="delete-3" href="#">Hapus</a><span> | </span>
                    <a class="item-cancel" id="cancel-3" href="#">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</div>

<br/>

<button id="menu-nav-action" type="submit" class="btn btn-success btn-sm">Save</button>

的js

$(document).ready(function () {

    $("#menu-ui-sortable").collapse().sortable({
        placeholder: "ui-sortable-placeholder",
        start: function(evt, ui ){
            ui.placeholder.height(ui.helper.outerHeight());
        },
        helper: function(evt, ui){
            var $clone =  $(ui).clone();
            $clone .css('position','absolute');
            return $clone.get(0);
        }
    });

    $(document).on('click', '#menu-nav-action', function (evt) {
        var menuNav = [];
        var ctn = 0;

        $("#menu-ui-sortable > div.panel.menu-item").each(function () {

            var menu_item_target = $(this).find('input[name="menu_item_target"]');
            var menu_item_target_ = menu_item_target.is(':checked') ? menu_item_target.val() : '0';

            var menu_item_classes_position = $(this).find('input[name="menu_item_classes_position"]');
            var menu_item_classes_position_ = '';

            for (var i = 0, length = menu_item_classes_position.length; i < length; i++) {
                if (menu_item_classes_position[i].checked) {
                    menu_item_classes_position_ = menu_item_classes_position[i].value;
                    console.log(menu_item_classes_position_);
                    break;
                }
            }

            /* Using each() function not work too */
            /*$(menu_item_classes_position).each(function () {
                if ($(this).is(':checked')) {
                    menu_item_classes_position_ = $(this).val();
                    console.log(menu_item_classes_position_);
                }
            });*/

            menuNav.push({
                nav_label: $(this).find('input[name="menu_item_title"]').val(),
                nav_title_attr: $(this).find('input[name="menu_item_attr_title"]').val(),
                nav_open_new_tab: menu_item_target_,
                nav_css_classes: $(this).find('input[name="menu_item_classes"]').val(),
                nav_css_classes_position: menu_item_classes_position_,
                nav_type: $(this).find('input[name="menu_item_type"]').val(),
                nav_link: $(this).find('input[name="menu_item_url"]').val(),
                nav_order: ctn});
            ctn++;
        });
        console.log(menuNav);
        alert(JSON.stringify(menuNav));
    });

});

這里的輸出：

[
    {
        "nav_label":"label 1",
        "nav_title_attr":"attr 1",
        "nav_open_new_tab":"1",
        "nav_css_classes":"fa fa-glass",
        "nav_css_classes_position":"", // **this should be "left"**
        "nav_type":"page",
        "nav_link":"www.example.com/page-12",
        "nav_order":0
    },
    {
        "nav_label":"label 2",
        "nav_title_attr":"attr 2",
        "nav_open_new_tab":"0",
        "nav_css_classes":"fa fa-search",
        "nav_css_classes_position":"", // **this should be "right"**
        "nav_type":"homepage-content",
        "nav_link":"#content-4",
        "nav_order":1
    },
    {
        "nav_label":"label 3",
        "nav_title_attr":"attr 3",
        "nav_open_new_tab":"0",
        "nav_css_classes":"fa fa-files",
        "nav_css_classes_position":"left",
        "nav_type":"custom-link",
        "nav_link":"www.example.com",
        "nav_order":2
    }
]

基於HTML，每個項目中nav_css_classes_position的正確值為“ left”，“ right”和“ left”。

這里是演示： jsfiddle

Answer 1

你的問題是由於這個

<input type="radio" name="menu_item_classes_position" value="left" checked="checked"> Sebelah kiri label</label>

您的所有單選元素都屬於同一組名=“ menu_item_classes_position” ，根據單選輸入的文檔，一次只能檢查一個組中的一個按鈕。 這就是為什么僅在菜單3中選中了單選按鈕的原因。 您也可以在小提琴中確認這一點。

您應該為菜單中的每組單選按鈕設置不同的名稱，以選擇正確的值。

Answer 2

您為每個組使用相同的無線電名稱[name =“ menu_item_classes_position”]。 每個組使用不同的名稱。

在您的示例中，有3個菜單項，其中包含用手風琴包裹的單選按鈕。 但是這些單選按鈕是一組。 也就是說，當您選擇第二個菜單項的單選按鈕時，它將取消選擇第一個菜單項的單選按鈕。