复选框实现单选的有关问题

复选框实现单选的问题

本帖最后由 jellday 于 2013-10-26 17:25:34 编辑



	$(":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>

假如联系人填王，那么点击后出现的是王先生、王女士。不选就去掉，仍然是王。
可是我做出来的是不断叠加的，会出现“王先生女士女士”……这样的

------解决方案--------------------
<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>
------解决方案--------------------
<!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>
这样试试
------解决方案--------------------




<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>

------解决方案--------------------

$(":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);

      }

});

复选框实现单选的有关问题

相关推荐