jquery計算窗體單選按鈕中的值之間的差異

我有一個問題。我試着讓我的樣本集單選按鈕，這個jQuery的工作是正確的與單選按鈕組，其是由名值除以工作，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>

，但我有一個問題，如何加載值與頁面加載檢查單選按鈕來顯示，（我的意思是值的arent顯示爲頁面加載後，儘管事實上，價值檢查，然後當我點擊單選按鈕值顯示。有沒有什麼辦法讓頁面加載時顯示在檢查值？

Thx在前面，如果有人想讓代碼更短，我會成爲gratefu l :)

來源

2011-03-02 Diki Vest

在jQuery上使用live（http://api.jquery.com/live/）函數並將其綁定到單選按鈕。使用Javascript來做任何你想做的改變。

來源

2011-03-02 00:03:44 Argote

我不能讓它與實時工作，仍然價值消失時，當我去下一個收音機設置，另一件事是否有可能使他們加載頁面加載顯示在選中的單選按鈕上的值？ – 2011-03-02 10:54:52

jquery計算窗體單選按鈕中的值之間的差異

回答

相關問題