dongying7667
2014-03-19 19:01
浏览 173
已采纳

选中的单选按钮显示文本框

I've searched a couple of questions on this site but couldn't find a helpfull one, the problem which I have is:

I have 2 radio form boxes, which are called 'Youtube' and 'Picture',I want this: When I click on the radio box of Youtube a text form shows up, I can't fix this and thats why I hope you do guys! thank you for you time!

my Javascript:

        <SCRIPT LANGUAGE="JavaScript">
    $("input[type='radio']").change(function(){

   if($(this).val()=="youtube")
   if($(this).val()=="pic")
   {
      $("#youtube").show();
   }
   else
   {
       $("#youtube").hide(); 
   }

    });
    </script>

My form:

 echo '
   <form action="post.php" method="post">
    title: <input name="title" type="text" id="title"><br />';

    //Picture link: <input name="pic" type="text" SIZE="80" id="pic"><br />
    //Youtube link: <input name="youtube" type="text" SIZE="80" id="youtube"><br />';
    echo '
    <input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/> | <input type="radio" name="pic" value="pic">Picture <input style="display: none;" type="text" name="pic" id="pic"/><br />
    Category game: 
     <select name="cat">';
      while($row=mysql_fetch_array($query2)){
echo '
       <option value="'.$row["nameID"].'">'.$row["name"].'</option> // here is the problem
        '; }
      echo '
     </select>
    <input type="submit" name="submit" value="submit">
   </form>
 ';
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • doushan1863 2014-03-19 19:29
    已采纳

    I think you need do this..

            $("input[type='radio']").change(function(){
    
        if($(this).val()=="youtube")
        {
           $("#youtube").show();
           $("#pic").hide();
        }
         if($(this).val()=="pic")
        {
           $("#pic").show();
           $("#youtube").hide();
        }
    
    });
    

    this will work fine, but you must be carefully >>look at this mate:

    <input type="radio" name="youtube" value="youtube">Youtube <input style="display: none;" type="text" name="youtube" id="youtube"/> 
    


    Picture

    when you set a radio name, set the name of radio same..like youtube, youtube ... also, look at a nother name in form, you use a same name for multiple elements, and this wrong mate, give another element defferant name .. to can get it on php side, without any error ...

    good luck

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • doujia1163 2014-03-19 19:14

    You nested the if statements. The code would only be used if they are both true.

    Your input type='radio' tags are not "closed" they should end with a slash as in:

    input type="radio" name="something" value="something"/>

    The text form that you complain about is already in your HTML code as

    input style="display: none;" type="text" name="youtube" id="youtube"/>

    and

    input style="display: none;" type="text" name="pic" id="pic"/>

    By default it is not displayed hence style="display: none", when your if statement evaluates as true, the display: none will be removed

    评论
    解决 无用
    打赏 举报
  • dongwen4487 2014-03-19 19:23

    Simplify, and un-nest your if statements as follows:

    if($(this).val()=="youtube")
       $("#youtube").show(); 
    } else {
       $("#youtube").hide(); 
    }
    

    This simply says if the radio button is the YouTube button, then show the youtube input, otherwise hide it.

    评论
    解决 无用
    打赏 举报
  • dongyan8896 2014-03-19 19:49

    Maybe you don't need to do the actual test. Just show the text field next to that input field. Here's a sample: http://jsfiddle.net/joeSaad/CTFJh/

    $('input[type="radio"]').change(function(){
        $('input[type="text"]').hide();
        $(this).next('label').next('input[type="text"]').show(); });
    

    Hope this helps.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题