简单的JS送分题。

效果如上图：
用javascript实现：当点击小明或小张的复选框时，显示出相应的性别。窗口紧跟随在姓名旁边。每个性别窗口都应是独立的哦。

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>floatDiv2.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
         div {
         border: 1px solid black;
         background-color: #E5F0FB;
         position: absolute; 
         width: 150px;
         height: 100px; 
         display: none;
         }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
         $(function () {
         $(document).click(function (e) {
         if (e.target.id != "show_box1" && e.target.id != "show_box2") {
         $("div[id^='show']").hide();
         } 
         });
         $(":checkbox").click(function (e) {
         $("div[id^='show']").hide();
         $("#show_"+ this.id).css({left: e.clientX, top: e.clientY}).show();
         return false;//防止冒泡
         });    
         });
        </script>
          </head>
      
      <body>
       <input type="checkbox" id="box1"/>
       <input type="checkbox" id="box2"/>
        <div id="show_box1" class="a b c"></div>
        <div id="show_box2" class="myCls"></div>
      </body>
    </html>
      

  2.   

    思路：事先布好局，在两个checkbox下面放两个隐藏的div，当check时，就显示出来，没有check时就隐藏
      

  3.   

    样式我没管, LZ自己弄. 
    可以自己设性别并在前段保存<!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" xml:lang="zh" lang="zh" dir="ltr">
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript">
    var data = [
    {name: "小张", sex: true},
    {name: "小李", sex: false},
    {name: "小王", sex: true}
    ];

    function init(){
    createList(data);
    bindEvents();
    }

    function createList(data){
    var html = new StringBuffer();
    $.each(data, function(key, value){
    html.append("<input class='Names' type='checkbox' id='Name_").append(key).append("' /><label for='Name_").append(key).append("'>").append(value.name).append("</label>");
    });
    $("#DataList").html(html.toString());
    }

    $(document).ready(init);

    //Events
    function bindEvents(){
    $(".Names").click(doNameClick);
    $(".Sex").click(doSexClick);
    }
    function doNameClick(e){
    var elem = $(e.target);
    $(".Names").removeAttr('checked');
    $(elem).attr('checked', 'true');

    showSexBox(elem[0].id);
    }

    function doSexClick(e){
    $(".Sex").removeAttr('checked');
    var elem = $(e.target);
    $(elem).attr('checked', 'true');

    var sex = $(elem)[0].id == "Male" ? true : false;

    var index = $("#Sex").attr('n');
    data[index].sex = sex;

    }

    function showSexBox(id){
    var l = $("#"+id).offset().left + 20;
    var t = $("#"+id).offset().top + 50;
    var index = id.split('_')[1];
    var sex = data[index].sex;

    $(".Sex").removeAttr('checked');
    (sex == true) ? $("#Male").attr('checked', 'true') : $("#Female").attr('checked', 'true');

    $("#Sex").css({left: l, top: t, display: 'block'});
    $("#Sex").attr('n', index);
    }
    //StringBuffer类 - by Wang
    var StringBuffer = function() {
    this._strings = new Array();
    };
    StringBuffer.prototype.append = function(str) {
    this._strings[this._strings.length] = str;
    return this;
    };
    StringBuffer.prototype.toString = function(str) {
    if (!str) {
    return this._strings.join('');
    } else {
    return this._strings.join(str);
    };
    };
    </script>
    <style type="text/css">
    #DataList
    {}
    #Sex
    {position:absolute;border:solid 1px #ccc;display:none;}
    </style>
    </head>
    <body>
    <div id="DataList"></div>

    <div id="Sex">
    <input type="checkbox" id="Male" class="Sex" name="SexGroup"/><label for="Male">男</label>
    <input type="checkbox" id="Female" class="Sex" name="SexGroup"/><label for="Female">女</label>
    </div>
    </body>
    </html>
    还有3L编译通不过是因为你没有在本机放置jquery.js. Lz这个都看不出来?