复选框检查/未选中的Javascript单选按钮

时间:2014-06-17 08:22:43

标签: javascript jquery

我需要使单选按钮的行为类似于能够检查/取消选中的复选框。问题是因为脚本是由对标签着色的click事件激活的。

HTML代码

<table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td>16:00-17.30</td>
        <td><label for="date_last07">19.Deployment event - matchmaking session</label></td>
        <td colspan="5">&nbsp;</td>
    </tr>
</table>
<input style="display:none;" id="date_last07" name="date_last01" type="radio" value="07" />

JS代码

$(document).ready(function(){
        $("input[name='date_last01']").click(function() {    
        var test = $(this).val();
        $("label[for='date_last"+test+"']").css("background-color", "yellow");
        $("input[name='date_last01']").prop('checked', false);
        $("input[name='date_last01']").prop('checked', true);
    }); 
});

CSS代码

tr {
    height: 1px;
}
td{
    height: 100%;
}
label{
    display: block; 
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}
label:hover {
    cursor:pointer;
}

小提琴:http://jsfiddle.net/upR8t/

0 个答案:

没有答案