在 jQuery 中的 function 中選中選中的單選按鈕

Question

我有以下標記：

    <div class="secondary-filter" onclick="searchByFilter()">
        <ul class="secondary-filter__list">
            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All">
                <label for="secondaryFilter-all">All</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
                <label for="secondaryFilter-quoted">Marked</label>
            </li>

            <li class="secondary-filter__list-item">
                <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending">
                <label for="secondaryFilter-unquoted">Pending</label>
            </li>
        </ul>
    </div>

如何獲得下面function中選中單選按鈕的label？

function searchByFilter() {
    var x = $("input[name='secondaryFilter']").find('input:checked');

    console.log(x.val());
}

我正在嘗試這個..但它不起作用。 請幫忙。

Answer 1

您的$("input[name='secondaryFilter']")創建一個 jQuery object if <input>元素，但.find僅搜索后代- 輸入元素沒有任何后代，而是您想要獲得匹配的<input>在當前集合中。

您還應該使用 Javascript 而不是在 HTML 屬性中附加事件偵聽器。 通過偵聽change事件，您將獲得僅在其中一個輸入更改時觸發的事件，而不是在單擊容器中的任何位置時觸發的事件。

此外，最好讓每個輸入旁邊的label的for屬性與輸入的id匹配 - 這樣，當單擊 label 時，將檢查輸入 - 例如，更改

<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-quoted">Marked</label>

至

<input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked">
<label for="secondaryFilter-marked">Marked</label>
                            ^^^^^^

雖然您可以使用.filter代替，但要在當前 jQuery object 中找到符合條件的元素：

 $("input[name='secondaryFilter']").on('change', function() { var x = $("input[name='secondaryFilter']").filter('input:checked'); console.log(x.val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>

將:checked放入第一個選擇器字符串會更容易：

const checkedInput = $("input[name='secondaryFilter']:checked");

 $("input[name='secondaryFilter']").on('change', function() { var x = $("input[name='secondaryFilter']:checked"); console.log(x.val()); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>

Answer 2

為了完成這項工作，將change事件處理程序直接附加到radio元素。 然后你可以在事件發生時從中獲取$(this).val() 。 您也可以使用next().text()來獲取 label 中顯示的值，盡管鑒於label的 radio 值和 innerText 相同，這似乎有點多余。

另請注意， label元素的for屬性需要與目標radio的id匹配，因此我也在那里修復了 HTML 。

 $('.secondary-filter:radio').on('change', function() { var $radio = $(this); var $label = $radio.next(); console.log(`value: ${$radio.val()}, label: ${$label.text()}`); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-marked">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-pending">Pending</label> </li> </ul> </div>

Answer 3

利用

input[name='secondaryFilter']:checked" ,'.secondary-filter'

它將檢查 div 的 class 內的選中單選按鈕

 function searchByFilter() { var x = $("input[name='secondaryFilter']:checked",'.secondary-filter') console.log(x.val()) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="secondary-filter" onclick="searchByFilter()"> <ul class="secondary-filter__list"> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-all" name="secondaryFilter" value="All"> <label for="secondaryFilter-all">All</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-marked" name="secondaryFilter" value="Marked"> <label for="secondaryFilter-quoted">Marked</label> </li> <li class="secondary-filter__list-item"> <input type="radio" id="secondaryFilter-pending" name="secondaryFilter" value="Pending"> <label for="secondaryFilter-unquoted">Pending</label> </li> </ul> </div>

Answer 4

var x = $('input[name=secondaryFilter]:checked').val()