加载与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

回答

相关问题