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

时间:2013-12-15 16:58:36

标签: javascript jquery if-statement radio-button

我这里有这段代码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.');
        }

    });

});

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

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

谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

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

尝试,

$("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

答案 1 :(得分:0)

请尝试检查

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

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