加載與jQuery可變成基於單選按鈕的選擇

加載變量成基於單選按鈕的選擇一個div。

HTML代碼：

//Variable to be loaded into 
<div id="choice"></div> 

//Available variables 
$choice1 = '<div id="choice-1">Choice 1</div>'; 
$choice2 = '<div id="choice-2">Choice 2</div>'; 

//Radio buttons 
<input type="radio" name="authors" id="authors" value="1"> 
<input type="radio" name="authors" id="authors" value="2">

jQuery代碼（到目前爲止）：

$("input[name='authors']").change(function() 
{  
    $('div[id=choice]').load(); 
});

場景：

如果用戶選擇第一個單選按鈕（值= 1），那麼應該加載$ choice1。如果在此之後選擇第二個單選按鈕，則應刪除$ choice1並將其替換爲$ choice2。

在此先感謝！

來源

2012-06-03 kexxcream

我假設你想從PHP腳本獲得這些變量。在這種情況下，發送參數與負載要求，如

$(」#choice」).load('myscript.php?choice=' + choice); // choice is variable in which you should put 1 or 2

而在PHP：

if($GET['choice'] == 1) echo $choice1; 
else if($GET['choice'] == 2) echo $choice2;

來源

2012-06-03 06:03:35 11684

var choiceArray = ['choice one', 'choice two']; 
$("input[name='authors']").change(function() 
{  
    $('#choice').html(choiceArray[parseInt($(this).val())]); 
});

還要注意，數組從0開始的索引，所以你也不得不在0開始你的單選按鈕的值，或使用他們的index()。

來源

2012-06-03 05:56:59 ahren

這隻會將字符串加載到div，但我會l ike它需要PHP變量$ choice1和$ choice2來代替。 – kexxcream

'var choiceArray = [$ choice1，$ choice2]' – ahren

只有當它們在構建此頁面的PHP腳本中可用時。 – 11684

$("input[name='authors']").change(function() 
{  
    if(this.value == 1) { 
     $('#choice').empty().append($choice1); 
     // or 
     // $('#choice').html($choice1); 
    } else { 
     $('#choice').empty().append($choice2); 
     // or 
     // $('#choice').html($choice1); 
    } 
});

DEMO

來源

2012-06-03 05:59:37 thecodeparadox

沒有真正相關，但爲什麼使用.empty（）。append（）？ .html（）更短，並達到相同的結果，我想？ – 11684

$("input[name='authors']").change(function() 
{  
    if(this.value== 1) 
    { 
     $('#choice').remove($choice2); 
     $('#choice').add($choice1); 

    } 
    else 
    { 
     $('#choice').remove($choice1); 
     $('#choice').add($choice2); 
    } 
});

來源

2012-06-03 06:02:17

對於您的HTML代碼中的JS作爲跟隨

$("input[name='authors']").click(function() { 
    var choice = ''; 
    var value = $(this).attr('value'); 
if (value == 1) { 
    choice += '<div id="choice-1">Choice 1</div>'; 
} 
else { 
    choice += '<div id="choice-1">Choice 2</div>'; 
} 
$('#choice').html(choice); 
});

演示在這裏：
http://jsfiddle.net/Simplybj/Ww9yw/4/

來源

2012-06-03 06:04:34 mesimplybj

回答

相關問題