复选框实现单选的问题

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

解决方案 »

  1.   

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

  2.   

    <!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>
    这样试试
      

  3.   

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

  4.   

    我谢谢你们，可是这都不是我想要的，1楼的，总不能每次改Value，都要改脚本吧？3楼的也是，如果用户输入刘呢，赵呢？2楼没有用jquery我是来寻求jquery解答方法的，js的方法我有继续等解决方法
      

  5.   

    $(":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的值同样">
      

  6.   


    明明自己没说清需求，临走还损你两句，#2楼你怎么看？
    呵呵  没专门用过jquery 思路其实就在那里了 看楼主是不是愿意自己动脑子想了