javascript - 如何使用 jquery 根据多个复选框更改 <div> 文本？

Question

我正在尝试将 Excel 表单创建为 Web 表单，现在我陷入了这部分:http://jsfiddle.net/J9NAS/40/

      <table id="model">
        <tr>
            <th class="auto-style2">Basic</th>
            <th class="auto-style2">Maxi</th>
            <th>Short</th>
            <th>Name</th>
            <th class="auto-style2">Selection</th>
        </tr>
        <tr>
            <td class="auto-style2">X</td>
            <td class="auto-style2">X</td>
            <td>A</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox1" type="checkbox" value="HA" class="basic" />
            </td>
        </tr>
        <tr>
            <td class="auto-style2">X</td>
            <td class="auto-style2">X</td>
            <td>B</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox2" type="checkbox" value="PA" class="basic" />
            </td>
        </tr>
        <tr>
            <td class="auto-style2">X</td>
            <td class="auto-style2">X</td>
            <td>C</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox3" type="checkbox" value="IA" class="basic" />
            </td>
        </tr>
        <tr>
            <td class="auto-style2">X</td>
            <td class="auto-style2">X</td>
            <td>D</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox4" type="checkbox" value="SPIN" class="basic" />
            </td>
        </tr>
        <tr>
            <td class="auto-style2">X</td>
            <td class="auto-style2">X</td>
            <td>E</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox5" type="checkbox" value="VB" class="basic" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>F</td>
            <td>asdasd)</td>
            <td class="auto-style2">
                <input id="Checkbox6" type="checkbox" value="BWCPN" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>G</td>
            <td>asddas</td>
            <td class="auto-style2">
                <input id="Checkbox7" type="checkbox" value="GBH" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>H</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox8" type="checkbox" value="GR" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>I</td>
            <td>dsad</td>
            <td class="auto-style2">
                <input id="Checkbox9" type="checkbox" value="IR" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>J</td>
            <td>asdasds.</td>
            <td class="auto-style2">
                <input id="Checkbox10" type="checkbox" value="CC" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>K</td>
            <td>asdasd.</td>
            <td class="auto-style2">
                <input id="Checkbox11" type="checkbox" value="GA" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>L</td>
            <td>Rasdasd.</td>
            <td class="auto-style2">
                <input id="Checkbox12" type="checkbox" value="GPAT" class="maxi" />
            </td>
        </tr>
        <tr>
            <td class="auto-style3">&nbsp;</td>
            <td class="auto-style2">X</td>
            <td>M</td>
            <td>asdasd</td>
            <td class="auto-style2">
                <input id="Checkbox13" type="checkbox" value="GPIN" class="maxi" />
            </td>
        </tr>
    </table>
     <h1>Callflow:</h1>

    <div id="status"></div>

<script type="text/javascript">
        $(document).ready(function () {
        $("#status").change(function () {
            if (("#Checkbox1").attr("checked") === true) {
                $("#status").append("#Checkbox1").val();
            };
        });
    });
</script>

我想向用户展示他选择了哪种模型(Basic 或 Maxi)。标准以“X”显示，并且根据用户选择的功能，表单下方的文本字段应显示“basic”或“maxi”。

有人可以帮我吗？我的 JQuery/JS 技能还非常基础。

Answer 1

尝试

$(document).ready(function () {
    var $basic = $('.basic'), $maxi = $('.maxi'), $status = $('#status');
    $basic.add($maxi).change(function(){
        if($maxi.filter(':checked').length){
            $status.text('Maxi')
        } else if($basic.filter(':checked').length){
            $status.text('Baisc')
        } else {
            $status.text('')
        }
    })
});

演示:Fiddle