Created
March 10, 2017 16:05
-
-
Save sivartravis/4cea6e39026ad203689d1b3f09e1cb2d to your computer and use it in GitHub Desktop.
Various jQuery input Selectors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <form action="#" method="post"> | |
| <div> | |
| <label for="name">Text Input</label> | |
| <br> | |
| <input type="text" name="name" /> | |
| <input type="text" name="name" /> | |
| </div> | |
| <hr> | |
| <div> | |
| <p>Radio Buttons</p> | |
| <input type="radio" name="radio" value="radio-1"> Radio One</input> | |
| <br> | |
| <input type="radio" name="radio" value="radio-2"> Radio Two</input> | |
| <br> | |
| <input type="radio" name="radio" value="radio-3"> Radio Three </label> | |
| </div> | |
| <hr> | |
| <div> | |
| <label for="checkbox">Checkbox:</label> | |
| <input type="checkbox" name="checkbox" /> | |
| <input type="checkbox" name="checkbox" /> | |
| <input type="checkbox" name="checkbox" /> | |
| <input type="checkbox" name="checkbox" /> | |
| </div> | |
| <hr> | |
| <div> | |
| <input type="submit" value="Submit" /> | |
| </div> | |
| </form> | |
| <section> | |
| <h3 class="text-elements">Text Elements: X</h3> | |
| <h3 class="radio-elements">Radio Elements: X</h3> | |
| <h3 class="checkbox-elements">Radio Elements: X</h3> | |
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var textCount = $(":text").length; | |
| $(".text-elements").text('Text Inputs : ' + textCount); | |
| $(":text").eq(0).val('Added programatically!'); | |
| var radioCount = $(":radio").length; | |
| $(".radio-elements").text('Radio Inputs : ' + radioCount); | |
| var checkboxCount = $(":checkbox").length; | |
| $(".checkbox-elements").text('Checkbox Inputs : ' + checkboxCount); | |
| $("form").submit(function(event) { | |
| event.preventDefault(); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: 'Dosis'; | |
| font-size: 1.2em; | |
| width: 600px; | |
| margin: 20px auto; | |
| } | |
| form { | |
| width: 50%; | |
| float: left; | |
| margin-right: 20px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment