根据所选的单选按钮设置div的内容

时间:2013-10-01 05:44:37

标签: javascript jquery html jsp

我有一个jsp文件:

<div class="span12" id="result" style="position: relative; top:-57px;margin-left:-10px">
 Is The Image Missing or Wrong?
<table>
 <tr>
  <td>
   <input type="radio" name="imageprob" value="Missing" onclick="MissingSelected()">
     Missing 
     <br>
     <input type="radio" name="imageprob" value="Wrong" onclick="WrongSelected()">Wrong
  </td>
  <td></td> //content of this column to be set based on which radio button slected
 </tr>
</table>
</div>  
</div>

我想根据第一列中选​​择的单选按钮设置表格中第二列的内容。我怎么能这样做?

3 个答案:

答案 0 :(得分:2)

试试这个兄弟| 检查此 Demo

<强> HTML

<div class="span12" id="result" style="position: relative; top:-57px;margin-left:-10px">
      Is The Image Missing or Wrong?
      <table><tr>
      <td><input type="radio" name="imageprob" value="Missing" onclick="selected(this)"> Missing 
<br>
      <input type="radio" name="imageprob" value="Wrong" onclick="selected(this)">Wrong</td>
      <td id="set"></td> //content of this column to be set based on which radio button slected
      </tr></table>
    </div>  
    </div>

<强> JS

function selected(dis)
{
    var ele= document.getElementById('set');
    if(dis.value =='Missing')
    {
     ele.innerHTML ="MIssing something";   
    }
    else    
    {
     ele.innerHTML ="Correct";   
    }
}

答案 1 :(得分:1)

当用户选择单选按钮调用其他页面时,使用jquery将填充数据并显示在特定的表格/ div中。

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second


$("input[@name='lom']").change(function(){
    $.get( "ajax/test.html", function( data ) {
       $( ".result" ).html( data );
       alert( "Load was performed." );
    });
});

http://api.jquery.com/jQuery.get/

答案 2 :(得分:1)

您可以使用Jquery并设置column2-value,如下所示:

$('input[name="imageprob"]').change(function(){
    var radioVal = $(this).val();
    var column2El = $('div#result > table td:nth-child(2)');
    if('Missing' === radioVal){
        alert('Missing');
        column2El.text('Missing');
    } else if('Wrong' === radioVal){
        alert('Wrong');
        column2El.text('Wrong');
    }
});

这是您提供的代码所特有的,并且适合您。