如何使用jquery为单选按钮设置边框样式

Question

我无法为单选按钮创建样式边框。

  <tr>
            <td class="style2">
                Gender</td>
            <td>
                <input id="Male" type="radio" checked="checked"/>M<input id="Female" type="radio" />F</td>
        </tr>
        <tr>
            <td class="style2">
                What products are you interested in?</td>
            <td>
                <input id="Checkbox1" type="checkbox" checked="checked"/><label for="Checkbox1">Widgets</label><br />
                <input id="Checkbox2" type="checkbox" /><label for="Checkbox1">Hibbity Jibbities</label><br />
                <input id="Checkbox3" type="checkbox" checked="checked"/><label for="Checkbox1">SplashBangers</label><br />
                <input id="Checkbox4" type="checkbox" /><label for="Checkbox1">Whatzits</label></td>
        </tr>

我在javascript中的尝试是

function rock() {
        document.getElementById("Male").style.border = "3px solid red"
    }

    window.onload = function() {
        rock();
    }
</script>

CSS

input#Male {
border: 3px solid red;
}

jquery的

$("form :checked").css("border", "3px solid red");
$("form :checkbox:checked").css("border", "3px solid red");
$("form input[id=Male]").css("border", "3px solid red");
$("form :radio:checked").css("border", "3px solid red");

所有代码都无效，请帮我解决此问题。

Answer 1

这是一个有效的demo。

unrelated