复选框实现单选的问题

jellday 2013-10-26 05:24:28

$(":checkbox[name=gender]").click(function(){
var str=$("#contact").val();
if($(this).attr("checked")!=undefined)
{
var check=this.checked;
$(':checkbox[name=gender]').attr("checked",false);
//$(this).siblings().attr("checked",false);
$(this).attr("checked",check);
$("#contact").val(str+$(this).val());
}
else{
str=str.replace($(this).val(),"");
$("#contact").val(str);
}
});


<dt>联系人:</dt>
<dd><input name="contact" type="text" id="contact" value="王">
<label><input name="gender" type="checkbox" value="先生" />先生</label>
<label><input name="gender" type="checkbox" value="女士" />女士</label></dd>


假如联系人填王,那么点击后出现的是王先生、王女士。不选就去掉,仍然是王。
可是我做出来的是不断叠加的,会出现“王先生女士女士”……这样的
...全文
122 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
引用 2 楼 zzgzzg00 的回复:
<!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function test(){ var arr=[]; var text=document.getElementById("contact"); var inputs=document.getElementsByTagName("input"); for(var i=0,len=inputs.length;i<len;i++){ if(inputs[i].type=='checkbox'){ arr.push(inputs[i]); inputs[i].onclick=function(){ if(!this.checked){ text.value=text.value.substring(0,text.value.length-2); }else{ for(var j=0;j<arr.length;j++){ if(arr[j]!=this){ if(arr[j].checked){ arr[j].click(); } } } text.value+=this.getAttribute("value"); } } } } } window.onload=test; </script> </head> <body> <input name="contact" type="text" id="contact" value="王"> <input name="gender" type="checkbox" value="先生" />先生 <input name="gender" type="checkbox" value="女士" />女士 </body> </html> 这样试试
明明自己没说清需求,临走还损你两句,#2楼你怎么看?
jellday 2013-10-27
  • 打赏
  • 举报
回复
没高手,都是不能解决方法的
booou 2013-10-27
  • 打赏
  • 举报
回复
$(":checkbox[name=gender]").click(function(){
  var str=$("#tmpContact").val();
  if($(this).attr("checked")!=undefined)
  {
      var check=this.checked;
      $(':checkbox[name=gender]').attr("checked",false);
      //$(this).siblings().attr("checked",false);
      $(this).attr("checked",check);
      $("#contact").val(str+$(this).val());
  }
  else{
      $("#contact").val(str);
      }
});
增加此行:
<input type="hidden" id="tmpContact" value="初始化时此值与contact的值同样">
似梦飞花 2013-10-27
  • 打赏
  • 举报
回复
引用 7 楼 z284122755 的回复:
[quote=引用 2 楼 zzgzzg00 的回复:] <!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function test(){ var arr=[]; var text=document.getElementById("contact"); var inputs=document.getElementsByTagName("input"); for(var i=0,len=inputs.length;i<len;i++){ if(inputs[i].type=='checkbox'){ arr.push(inputs[i]); inputs[i].onclick=function(){ if(!this.checked){ text.value=text.value.substring(0,text.value.length-2); }else{ for(var j=0;j<arr.length;j++){ if(arr[j]!=this){ if(arr[j].checked){ arr[j].click(); } } } text.value+=this.getAttribute("value"); } } } } } window.onload=test; </script> </head> <body> <input name="contact" type="text" id="contact" value="王"> <input name="gender" type="checkbox" value="先生" />先生 <input name="gender" type="checkbox" value="女士" />女士 </body> </html> 这样试试
明明自己没说清需求,临走还损你两句,#2楼你怎么看?[/quote] 呵呵 没专门用过jquery 思路其实就在那里了 看楼主是不是愿意自己动脑子想了
jellday 2013-10-26
  • 打赏
  • 举报
回复
我谢谢你们,可是这都不是我想要的,1楼的,总不能每次改Value,都要改脚本吧?3楼的也是,如果用户输入刘呢,赵呢?2楼没有用jquery。。。我是来寻求jquery解答方法的,js的方法我有 继续等解决方法
  • 打赏
  • 举报
回复


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("input:checkbox[name=gender]").click(function(){
			if($(this).attr('checked')){
				$("input:checkbox[name=gender]").not($(this)).attr('checked',false);
				$("#contact").val('王'+$(this).val());
			}else{
				$("#contact").val('王');
			}
	
		});
	});
</script>
<dt>联系人:</dt>
<dd><input name="contact" type="text" id="contact" value="王"> 
<label><input name="gender" type="checkbox" value="先生" />先生</label>
<label><input name="gender" type="checkbox" value="女士" />女士</label></dd>
似梦飞花 2013-10-26
  • 打赏
  • 举报
回复
<!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> function test(){ var arr=[]; var text=document.getElementById("contact"); var inputs=document.getElementsByTagName("input"); for(var i=0,len=inputs.length;i<len;i++){ if(inputs[i].type=='checkbox'){ arr.push(inputs[i]); inputs[i].onclick=function(){ if(!this.checked){ text.value=text.value.substring(0,text.value.length-2); }else{ for(var j=0;j<arr.length;j++){ if(arr[j]!=this){ if(arr[j].checked){ arr[j].click(); } } } text.value+=this.getAttribute("value"); } } } } } window.onload=test; </script> </head> <body> <input name="contact" type="text" id="contact" value="王"> <input name="gender" type="checkbox" value="先生" />先生 <input name="gender" type="checkbox" value="女士" />女士 </body> </html> 这样试试
joeleemaster 2013-10-26
  • 打赏
  • 举报
回复
<dt>联系人:</dt> <dd><input name="contact" type="text" id="contact" value="王"> <label><input name="gender" type="checkbox" value="先生" />先生</label> <label><input name="gender" type="checkbox" value="女士" />女士</label></dd> <script> $("input:checkbox[name=gender]").click(function(){ var str=$("#contact").val(); str=str.replace(/(先生)|(女士)/,''); $('input:checkbox[name=gender]').attr('checked',false); $('#contact').val(str+$(this).val()); $(this).attr('checked',true); }); </script>

87,902

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧