Question

问题：

根据单选按钮的选择将变量加载到div中。

HTML code：

//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);
    }
});

<强> DEMO

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/

基于单选按钮选择将带有jQuery的变量加载到div中

5 个答案: