Question

在一个页面中，我有两个搜索表单：

<form class="search-panel" method="post" action="" onsubmit="return searchRedirect(this)">
        <input type="test" name="searchFor" />
        <div class="additional-search-button"></div>
        <div id="additional-search-box">
            <div class="as-cont">
                Books<input type="radio" name="category" value="Books" checked="1" /><br/>
                School<input type="radio" name="category" value="School" /><br/>
                Music<input type="radio" name="category" value="Music" />
            </div>
        </div>
       <input type="submit" name="search" />
    </form>

<form class="search-panel" method="post" action="" onsubmit="return searchRedirect(this)">
            <input type="test" name="searchFor" />
            Games<input type="radio" name="category" value="Games" checked="1" />
            <input type="submit" name="search" />
        </form>

我的问题是，如果我在searchRedirect中点击搜索游戏，如果他们检查过，请始终提醒图书，学校或音乐：

这是我的javascript函数：

function searchRedirect(form) {
    alert($(form['category']+':checked').val());

    if($(form['category']+':checked').val() == 'Форум')
        window.location.href = '/forum/search.php?keywords='+form['searchFor'].value;
    else {
        window.location.href = '/Search/'+$(form['category']+':checked').val()+'/'+form['searchFor'].value;
    }

    return false;
}

我需要点击搜索游戏 - 只搜索游戏，如果点击搜索书籍，学校或音乐 - 只搜索它们。但是现在游戏的搜索表单总是使用第一个表格检查按钮。

Answer 1

form['category']将为您提供NodeList个名称为category的所有表单元素，因此您无法通过将其与:checked连接来将其用作选择器。它等同于$("[object NodeList]:checked")。

由于您已经在使用jQuery，因此可以使用以下代码：

alert($(form).find("input[name='category']:checked").val());

即，在form的上下文中，找到名称为input category的每个checked元素，并获取其value。

Answer 2

你不能真正做form["category"] + ":checked"，而是使用jQuery的过滤方法，而不是使用'this'来引用表单。此外，您可以/应该使用jQuery .submit（）来捕获事件而不是内联处理程序，只是为了更清晰的代码（以及更好的性能）将$(form['category']+':checked')放入变量中，因此jquery不需要一次又一次地搜索元素。这是一个示例：

$('form').submit(function(e){
var checked = $(this['category']).filter(':checked');
var value = checked.val();
alert(value);
})

这是一个小提琴，所以你可以摆弄（传递给提交回调的e是事件对象，而e.preventDefault就像返回false，因此表单不会提交）： http://jsfiddle.net/SJ7Vd/

Javascript：选中单选按钮

2 个答案: