使用 jquery 获取单选按钮的值并根据选择显示文本

Question

我在这里有这段代码http://jsfiddle.net/fQTUp/302/ 一切正常，直到我添加第二组单选按钮。

$("input").click(function (event) {
    var total = 0;
    $("input:checked").each(function () {
        if ($(this).attr("price") !== undefined) {
            total += parseInt($(this).attr("price"));

        } else {
            total += 0;
        }
    });

    if (total === 0) {
        $('.total-price').text('Some new text.');

    } else {
        $('.total-price').text('Total price: $' + total);
    }

});

$("input").click(function (event) {
    $("input:checked").each(function () {
        if ($("input:checked").attr("value") == "ownlogo") {
            $('.logo_p').text('Own logo.');
        }

        if ($("input:checked").attr("value") == "textlogo") {
            $('.logo_p').text('Text logo.');
        }

        if ($("input:checked").attr("value") == "Starter") {
            $('.plan_price').text('Strtr price.');
        }

        if ($("input:checked").attr("value") == "Business1") {
            $('.plan_price').text('Business price.');
        }

        if ($("input:checked").attr("value") == "Pro") {
            $('.plan_price').text('Pro price.');
        }

    });

});

当我开始单击第二组按钮时 - 它可以工作，但是当我从第一组中选择某些东西时，第二组停止工作。

请查看脚本以了解我的问题。

感谢您的帮助！

Answer 1

您必须在 .each() 循环中使用 $(this) 引用。 .each() 循环内的 $("input:checked") 将简单地返回第一个匹配的元素，这就是您的代码中的问题。

试试，

$("input").click(function (event) {
    $("input:checked").each(function () {
        if ($(this).attr("value") == "ownlogo") {
            $('.logo_p').text('Own logo.');
        }

        if ($(this).attr("value") == "textlogo") {
            $('.logo_p').text('Text logo.');
        }

        if ($(this).attr("value") == "Starter") {
            $('.plan_price').text('Strtr price.');
        }

        if ($(this).attr("value") == "Business1") {
            $('.plan_price').text('Business price.');
        }

        if ($(this).attr("value") == "Pro") {
            $('.plan_price').text('Pro price.');
        }
    });
 });

DEMO

Answer 2

试试这个检查

 if ($('input[name=RadioGroupName]:checked').attr("value") == "textlogo")

其中 RadioGroupName 是您的单选按钮组名称。通过这种方式，您可以分别检查您的每个组。