jquery - 使用 jQuery 将变量加载到基于单选按钮选择的 div 中

Question

问题：

根据单选按钮的选择将变量加载到 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。

提前致谢！

Answer 1

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

另请注意，数组的索引从 0 开始，因此您还必须将单选按钮值从 0 开始，或者使用它们的index().

Answer 2

$("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);
    }
});

演示

Answer 3

我假设您正在尝试从 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;

Answer 4

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

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

Answer 5

对于您的 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/