css not displaying w/ jQuery attribute filters

eldan88 · November 25, 2013

Hey Guys. I am trying to have my checkboxes marked checked with jQuery attribute filter, but for some reason its not showing for all the checked HTML attributed.

Any suggestions on how to make it work? Thanks!

<!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>
<title>Using Form Selectors and Filters</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $("document").ready(function() {
        $("form :checkbox:checked").css("border", "3px solid red");
    });
</script>
    <style type="text/css">
        .style1
        {
            width: 600px;
        }
        .style2
        {
            width: 200px;
        }
    </style>
</head>
<body>

    <h1>
        Example Form Document</h1>
<form action="" method="post">

<table class="style1">
<tbody>
    <tr>
        <td class="style2">
            First Name</td>
        <td>
            <input id="FirstName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Last Name</td>
        <td>
            <input id="LastName" type="text" /></td>
    </tr>
    <tr>
        <td class="style2">
            Disabled Element</td>
        <td>
            <input id="Text1" type="text" disabled="disabled"/></td>
    </tr>
    <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>
    <tr>
        <td class="style2">
            Comments:</td>
        <td>
            <textarea id="Comments" cols="40" name="S1" rows="5"></textarea></td>
    </tr>
    <tr>
        <td class="style2">
            Optional life story file</td>
        <td>
            <input id="File1" type="file" /></td>
    </tr>
    <tr>
        <td class="style2">
             </td>
        <td>
             </td>
    </tr>
    <tr>
        <td class="style2">
             </td>
        <td>
            <input id="Submit1" type="submit" value="submit" /> <input id="Reset1" 
                type="reset" value="reset" /></td>
    </tr>
</tbody></table>

</form>
</body>
</html>

Sign In

css not displaying w/ jQuery attribute filters

Recommended Posts

eldan88

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information