2011-02-24 105 views
0

试图让<input class="box" type="text" value="??" name="searchQuery"的值=“”在选择单选按钮时改变。因此,例如,如果用户按下“名字”单选按钮,它将.box输入的值更改为诸如“输入名字”之类的值,并将其用于其他单选按钮。jQuery改变在选择单选按钮时输入文本

谁能帮助? jQuery的新手在这里:)

<!DOCTYPE html> 
<html> 
<head> 

    <link rel="stylesheet" href="global.css" media="screen" /> 
    <link rel="stylesheet" href="design.css" media="screen" /> 
    <style type="text/css"> 
    .hidden { 
    display: none; 
    } 
    </style> 
    <script type="text/javascript" src="inc/jquery.js"> </script> 
    <script type="text/javascript">$(function() {$('input[type=text]').focus(function() {$(this).val('')});});</script> 
    <!-- // --> 
**<script> 
    $("#searchSelect").change(function() { 
      var str = ""; 
      $("radio option:option1").each(function() { 
       str += $(this).text() + " "; 
       }); 
      $("div").text(str); 
     }) 
     .change(); 
</script>** 
</head> 

<body> 
<div id="top_wrapper_bg"> 
    <div id="wrapper_top"> 
     <div id="header"> 
       <div id="logo"> 
       <a href="index.php"><img src="img/logo-02-01-11.png" alt="logo-02-01-11" width="300" height="100" border="0" /></a> 
       </div><!-- /logo --> 
       <div id="header_image"> 
       right 
       </div><! -- /header_image --> 
       <div id="clear"> </div><! -- /clear --> 
       <div id="nav"> 
       nav 
       </div><! -- /nav --> 
     </div><!-- /header--> 
    </div><!-- /wrapper_top --> 
</div><!-- /top_wrapper_bg --> 

<div id="header_search_break"> </div> 

<div id="bot_wrapper_bg">  
    <div id="wrapper_bottom"> 
      <div id="search"> 
        <span class="medfont">Search by:</span> 
         <form id="searchSelect" action="#"> 
          <input type="radio" name="option1" value="First Name" />First Name&nbsp; 
          <input type="radio" name="option1" value="Last Name" />Last Name&nbsp; 
          <input type="radio" name="option1" value="Department" />Department&nbsp; 
          <input type="radio" name="option1" value="Course" />Course 
         </form> 
         <br>    
        <input class="box" type="text" name="searchQuery" value="Select an option..." class="textField clearMeFocus" /> 
      </div><!-- /search --> 
      <div id="latest_stats"> 
      <p>Stats</p> 
      </div><!-- /latest_stats --> 
      <div id="clear"> </div> 
     <div id="contain_stats"> 
       <div id="latest_prof"> 
       latest prof 
       </div><!-- /latest_prof --> 

       <div id="top_prof"> 
       top prof 
       </div><!-- /top_prof --> 
       <div id="clear"> </div><! -- /clear --> 
     </div><!-- /contain_stats --> 
     <br><br><br><br><br><br><br><br> 

     <h6 style="margin:0; padding:0; font-size:0.3em;"><a href="prof.php">Prof Page</a></h6> 

    </div><!-- /wrapper_bottom --> 
</div><!-- /bot_wrapper_bg --> 
</body> 
</html> 

回答

1

Really Simple fiddle.

使用代码:

$(document).ready(function(){ 
    $("input[type=radio]").click(function(){ 
    $("#it").val(this.value); 
    }); 
}); 

和HTML:

<input type="text" id="it" value=""> 
<input type="radio" name="hey" value="one"> 
<input type="radio" name="hey" value="two"> 
<input type="radio" name="hey" value="three"> 

这说明了如何做到这一点的概念。

0

给无线输入一类的“选项”或者叫它什么都

<input type='radio' class='option' name='option' value='First Name'> 

然后jQuery的:

$('.option').click(function(){ 
    var thisRadio = $(this).val(); 
    $('.box').val(thisRadio); 
}); 
1
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#searchSelect input[type=radio]').change(function(){ 
      $('input.box').val('Enter ' + $(this).val()); 
     }); 

    }); 
</script> 
0

它将绑定的所有输入的事件处理程序的变化内表格searchSelect,名称option1type radio

$(function() { 
    $('#searchSelect input[name="option1"]:radio').change(function() { 
     $('.box').val('Enter a ' + this.value); 
    }); 
}); 

要了解有关更改事件的更多信息,请查看jQuery documentation

0
$(document).ready(function() { 
    $("input[name=option1]:radio").click(function(eventObj) { 
     $("input[name=searchQuery]").val("Enter a " + $(eventObj.target).val()); 
    }); 
});