如何将表单文本正好放在单选按钮前面

时间:2014-12-23 10:18:18

标签: javascript php html css

我想给我发电子邮件' &安培;打电话给我'正好在前面的单选按钮。在代码中它来自单选按钮。有人可以建议我怎么做。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$('#emailbtn').on('click',function(){


    if($('#callbtn').prop('checked'))
       {
       $('#callbtn').prop('checked','');       
       }
});


$('#callbtn').on('click',function(){


    if($('#emailbtn').prop('checked'))
       {
       $('#emailbtn').prop('checked','');       
       }
});
</script>
</head>

html代码是

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post" style="padding-left:8%;">
    <input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span>
</form>
<form name="form2" method="post" style="padding-left:8%;">   
    <input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>
<input type="radio" value="chat" name="select" id="chatbtn" onclick="showchat()" />
Chat with me<span id="chathide"><a href="valency-networks-chat.html"><input style="display:none" type="submit" name="chat" id="chat" value="Go"/></a></span>

2 个答案:

答案 0 :(得分:1)

在表单中添加单选按钮: FIDDLE

<form name="form1" method="post" style="padding-left:8%;">
    <input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />Email me :<span id="emailhide" style="display:none">
    <input type="text" size="50" name="email" id="email_id" placeholder="*************" />
    <input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" />
    <span id="emailid"></span>
</form>

<form name="form2" method="post" style="padding-left:8%;">
    <input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />Call Me :<span id="phonehide" style="display:none">
    <input type="text" size="50" name="phn" id="call" placeholder="*************" />
    <input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" />
    <span id="phoneno"></span>
</form>

答案 1 :(得分:0)

$(document).on('ready',function(){$('#emailbtn').on('click',function(){
 

    if($('#callbtn').prop('checked'))
       {
       $('#callbtn').prop('checked','');       
       }
});


$('#callbtn').on('click',function(){


    if($('#emailbtn').prop('checked'))
       {
       $('#emailbtn').prop('checked','');       
       }
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form name="form1" method="post" style="padding-left:8%;">
    <input type="radio" value="email" name="select" id="emailbtn" onclick="showemail()" />
Email me :<span id="emailhide" style="display:none"><input type="text" size="50" name="email" id="email_id" placeholder="*************" /><input type="submit" name="email" value="email" id="emailbtn" style="font-size:16px;" onclick="return validation1()" /></span>
<span id="emailid"></span></form>

<form name="form2" method="post" style="padding-left:8%;">   
    <input type="radio" value="call" name="select" id="callbtn" onclick="showphn()" />
Call Me :<span id="phonehide" style="display:none"><input type="text" size="50" name="phn" id="call" placeholder="*************" /><input type="submit" name="submit" value="call" id="callbtn" onclick="return validation2()" /></span>
<span id="phoneno"></span>
</form>