0

我正在尝试学习 jQuery，并且有一个问题对于已经熟悉它的人来说可能非常简单。

应用程序：将 PHP 与 jQuery 和 Bootstrap 切换按钮 (http://www.larentis.eu/bootstrap_toggle_buttons/) 结合使用，根据用户“打开”的切换按钮创建动态链接地址。

现在我正在使用表单发布切换按钮状态，一旦页面重新加载它然后拉出这些 POST 变量并将它们附加到链接。

我想做的是让jQuery在用户切换按钮时自动更改页面上的链接，而不必使用表单发布。

每次切换切换按钮时，我想做的是用外行术语解释：

$link = "http://www.mydomain.com/students.php?view="

if jQuery toggle-button-1 = on then add "name"
if jQuery toggle-button-2 = on then add "id"
if jQuery toggle-button-3 = on then add "address"

// If toggle-button-1 and toggle-button-2 were on and toggle-button-3 was off
// then $views would equal
$views = "name,id"

// On the webpage it would then display

http://www.mydomain.com/students.php?view=name,id

// If the person toggled toggle-button-1 to off, the link would display:

http://www.mydomain.com/students.php?view=id

我希望我已经对此进行了解释，以便您能够理解...我正在尝试做的事情真的很简单，我知道如何在 PHP 中做到这一点，但我觉得我一直在网上搜索应该是的东西简单，我似乎无法理解它。

如果有人可以帮助我或指出正确的方向，我将不胜感激！

谢谢！！

4

2 回答 2

2

这是我在jsFiddle上的示例

HMTL

<input type="checkbox" name="name" value="name" id="name" /> name<br />
<input type="checkbox" name="id" value="id" id="id" /> id<br />
<input type="checkbox" name="address" value="address" id="address" /> address<br />
Link: <input type="text" name="url" value="" id="url" />

JavaScript

$(function() {
    var link = "http://jsfiddle.net/mouse0270/chnyy/"
    $('input[type=checkbox]').change(function () {
        var viewItems = "";
        $('input[type=checkbox]:checked').each(function () {
            viewItems += ','+$(this).val();
        });
        $('#url').val(link+'?view='+viewItems.substring(1));                  
    });         
});​
于 2012-11-21T16:55:53.720 回答
1

http://jsfiddle.net/CvsbD/

HTML

<input type="checkbox" class="items" id="one" data-view="name" />
<input type="checkbox" class="items" id="two" data-view="id" />
<input type="checkbox" class="items" id="three" data-view="address" />

<input type="text" id="output" />

JS

$("body").on('change', '.items', function(){
    // filter down to items that are checked
    var items = $('.items').filter(function(){
        return this.checked;
    });
    // map data values to an array
    items = items.map(function (){
        return $(this).data('view');
    }).get();

    // join the array with a comma separator 
    $("#output").val(items.join(','));
});​

请注意，将委托绑定到文档正文通常不是最好的方法。您需要使用复选框的更直接祖先，或者您可以将更改事件绑定到复选框本身。

这可以进一步简化（忘记:checked），如下所示：

$("body").on('change', '.items', function(){
    // filter down to items that are checked, and get their data-view value.
    var items = $('.items:checked').map(function(){
        return $(this).data('view');
    }).get();

    // join the array with a comma separator 
    $("#output").val(items.join(','));
});​
于 2012-11-21T16:53:32.887 回答