Question

我有一个不满的问题。我试图让我的jquery使用我的样本集单选按钮，以正确使用按名称值划分的单选按钮集，

这是我的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
{
        // calc option price differences
        $("label input:radio[name=model]").click(function()
        {
                var _price = $(this).next().val();
                $("label span").remove();
                $("label input:radio[name=model]").map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });

        // calc option price differences
        $("label input:radio[name=size]").click(function()
        {
                var _price = $(this).next().val();
                $("label span").remove();
                $("label input:radio[name=size]").map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });

        // calc option price differences
        $("label input:radio[name=color]").click(function()
        {
                var _price = $(this).next().val();
                $("label span").remove();
                $("label input:radio[name=color]").map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span>' + diff + '</span>');
                        }
                });
        });
});
</script>





<style type="text/css" media="screen">
ul { list-style-type: none; }
span { color: blue; }
</style>
</head>
<body>

<ul id="model">
      <li><label for="model1"><input type="radio" id="model1" name="model" value="PART-NO-1" checked="checked" /><input type="hidden" value="100.00" /> Model 1</label></li>
      <li><label for="model2"><input type="radio" id="model2" name="model" value="PART-NO-2" /><input type="hidden" value="200.00" /> Model 2</label></li>
      <li><label for="model3"><input type="radio" id="model3" name="model" value="PART-NO-3" /><input type="hidden" value="300.00" /> Model 3</label></li>
</ul>
</form>
<ul id="size">
      <li><label for="size1"><input type="radio" id="size1" name="size" value="PART-NO-4" /><input type="hidden" value="5.00" /> Small</label></li>
      <li><label for="size2"><input type="radio" id="size2" name="size" value="PART-NO-5" /><input type="hidden" value="10.00" /> Medium</label></li>
      <li><label for="size3"><input type="radio" id="size3" name="size" value="PART-NO-6" checked="checked" /><input type="hidden" value="15.00" /> Large</label></li>
</ul>

<ul id="color">
      <li><label for="color1"><input type="radio" id="color1" name="color" value="PART-NO-7" /><input type="hidden" value="10.00" /> Blue</label></li>
      <li><label for="color2"><input type="radio" id="color2" name="color" value="PART-NO-8" checked="checked" /><input type="hidden" value="20.00" /> Red</label></li>
      <li><label for="color3"><input type="radio" id="color3" name="color" value="PART-NO-9" /><input type="hidden" value="30.00" /> Yellow</label></li>
</ul>

我想要工作的东西，是我切换到另一个收音机后显示的值，例如，如果我点击第一个收音机组，它是模型，它正确地给我减去或添加值，但当我点击在尺寸无线电设置上，模型收音机的设定值消失了，有什么方法可以让它们留在那里，不管有什么设置我点击下一个？

帮助或建议将不胜感激。 Thx在前面。

我以某种方式使用跨度值

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function()
{
        // calc option price differences
        $("label input:radio[name=model]").click(function()
        {
                var _price = $(this).next().val();
                $("label span[id='price1']").remove();
                $("label input:radio[name=model]").map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span id="price1">' + diff + '</span>');
                        }
                });
        });

        // calc option price differences
        $("label input:radio[name=size]").click(function()
        {
                var _price = $(this).next().val();
                $("label span[id='price2']").remove();
                $("label input:radio[name=size]").map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span id="price2">' + diff + '</span>');
                        }
                });
        });

        // calc option price differences
        $("label input:radio[name=color]").click(function()
        {
                var _price = $(this).next().val();
                $("label span[id='price3']").remove();
                $("label input:radio[name=color]").map(function()
                {
                        var diff = _price - $(this).next().val();
                        if (diff != 0)
                        {
                                diff = (diff<0) ? '[Add $' + (-diff) + ']' : '[Subtract $' + diff + ']';
                                $(this).parent().append(' <span id="price3">' + diff + '</span>');
                        }
                });
        });
});
</script>





<style type="text/css" media="screen">
ul { list-style-type: none; }
span { color: blue; }
</style>
</head>
<body>

<ul id="model">
      <li><label for="model1"><input type="radio" id="model1" name="model" value="PART-NO-1" checked="checked" /><input type="hidden" value="100.00" /> Model 1</label></li>
      <li><label for="model2"><input type="radio" id="model2" name="model" value="PART-NO-2" /><input type="hidden" value="200.00" /> Model 2</label></li>
      <li><label for="model3"><input type="radio" id="model3" name="model" value="PART-NO-3" /><input type="hidden" value="300.00" /> Model 3</label></li>
</ul>
</form>
<ul id="size">
      <li><label for="size1"><input type="radio" id="size1" name="size" value="PART-NO-4" /><input type="hidden" value="5.00" /> Small</label></li>
      <li><label for="size2"><input type="radio" id="size2" name="size" value="PART-NO-5" /><input type="hidden" value="10.00" /> Medium</label></li>
      <li><label for="size3"><input type="radio" id="size3" name="size" value="PART-NO-6" checked="checked" /><input type="hidden" value="15.00" /> Large</label></li>
</ul>

<ul id="color">
      <li><label for="color1"><input type="radio" id="color1" name="color" value="PART-NO-7" /><input type="hidden" value="10.00" /> Blue</label></li>
      <li><label for="color2"><input type="radio" id="color2" name="color" value="PART-NO-8" checked="checked" /><input type="hidden" value="20.00" /> Red</label></li>
      <li><label for="color3"><input type="radio" id="color3" name="color" value="PART-NO-9" /><input type="hidden" value="30.00" /> Yellow</label></li>
</ul>

但我还有一个问题，如何加载要在页面加载的已检查单选按钮上显示的值，（我的意思是在页面加载时没有显示值，显示检查值的事实，然后当我点击单选按钮值显示。当页面加载时，有没有办法让它们显示在选中的值上？

Thx在前面，如果有人想让代码更短，我将不胜感激：）

Answer 1

在jQuery上使用live（http://api.jquery.com/live/）函数并将其绑定到单选按钮。使用Javascript然后执行您想要做的任何更改。

Jquery计算表单单选按钮中值之间的差异

1 个答案: