Search the Community
Showing results for tags 'radio'.
Found 4 results
-
Hello! I am looking for some assistance with my drop down panel. When I try to add "<div id="panel"></div> to the "select to filter by type section", it does not toggle the panel at all. Can you tell me what I am doing incorrectly? http://jsfiddle.net/AlanaVibes/xNj9z/92/#&togetherjs=ROVpoPMv4L <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Checkboxradio - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "input" ).checkboxradio(); } ); </script> </head> <body> <div class="widget"> <h1>Our Manufacturers</h1> <fieldset> <legend>Select a Territory: </legend> <label for="radio-1">All</label> <input type="radio" name="radio-1" id="radio-1"> <label for="radio-2">North Texas</label> <input type="radio" name="radio-1" id="radio-2"> <label for="radio-3">Oklahoma</label> <input type="radio" name="radio-1" id="radio-3"> <label for="radio-4">Arkansas</label> <input type="radio" name="radio-1" id="radio-4"> </fieldset> <script> &(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: left; background-color: white; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> <div id="flip"> <h2>Type of Material</h2></div> <fieldset> <legend> Select to filter by Type </legend> <label for="checkbox-1">Wire & Cable</label> <input type="checkbox" name="checkbox-1" id="checkbox-1"> <label for="checkbox-2">Wire & Cable Accessories</label> <input type="checkbox" name="checkbox-2" id="checkbox-2"> <label for="checkbox-3">Conduit & Fittings</label> <input type="checkbox" name="checkbox-3" id="checkbox-3"> <label for="checkbox-4">Wiring Devices</label> <input type="checkbox" name="checkbox-4" id="checkbox-4"> <label for="checkbox-5">Enclosures & Wireway</label> <input type="checkbox" name="checkbox-4" id="checkbox-5"> <label for="checkbox-6">Lighting</label> <input type="checkbox" name="checkbox-4" id="checkbox-6"> <label for="checkbox-7">Fuses</label> <input type="checkbox" name="checkbox-4" id="checkbox-7"> <label for="checkbox-8">Tools & Fasteners</label> <input type="checkbox" name="checkbox-4" id="checkbox-8"> <label for="checkbox-9">Motor Control</label> <input type="checkbox" name="checkbox-4" id="checkbox-9"> <label for="checkbox-10">Specialty</label> <input type="checkbox" name="checkbox-4" id="checkbox-10"> </fieldset> </div> </body> </html>
-
Hello I want to put an accordion-like menu on my site. Looking on Google i came across this: https://codepen.io/raubaca/pen/PZzpVe So i tried to use it on my site here: http://www.armonisencia.cl/site/puntos-de-venta/ I like how when you put the input type as"select" in the tabs, they toggle open/close when you click them, but if you click another tab when you have one open, the first one keeps open. I wish it closed itself. By the other hand, i you put the input type as "radio" in the tabs, every time you lick on one of them, this opens and the others close. But you can close the open tab clicking it again. I wish i could have both effect in one. How can i do it?
-
What i am trying to do is create 3 items 2 are radio buttons and the other is a check box. I would like to give the 3 of them CSS styles and have them change the background and text color when selected or checked. below is the code and examples. first in the pictures are the layout of the Buttons and Checkbox. then below is the css style i want them to look like when done. pay no attention to the label of the css boxes i did that to give a example of selected and unselected. unselected is black background and green text and selected is the reverse. <!doctype html><html><head><meta charset="utf-8"><link href="Button.css" rel="stylesheet" type="text/css"></head><body><input type="radio" id="COM1TX" name="COMTX">COM 1 Tx<br><input type="checkbox" id="COMRX" name="COMRX">COM 1,2 Rx<br><input type="radio" id="COM2TX" name="COMTX">COM 2 Tx<br><div><input class="TEST" id="COM" type="button" name="COM" value="COM"><input class="TEST" id="COM2" type="button" name="COM2" value="COM2"></div><div><input class="TEST" id="COM3" type="button" name="COM3" value="COM3"><input class="TEST" id="COM4" type="button" name="COM4" value="COM4"></div> </body></html> @charset "utf-8";/* CSS Document */#COM{ width: 150px; height: 100px; position: absolute; top: 100px; left: 0px; cursor: crosshair;}#COM2{ width: 150px; height: 100px; position: absolute; top: 200px; left: 0px; cursor: crosshair;}#COM3{ width: 150px; height: 100px; position: absolute; top: 100px; left: 150px; cursor: crosshair;}#COM4{ width: 150px; height: 100px; position: absolute; top: 200px; left: 150px; cursor: crosshair; color: #000000; background-color: #00F349;}.TEST{ background-color: #000000; color: #00F349; text-align: center; border: thin solid #00F349; line-height: 100px; vertical-align: middle; font-size: 50px; cursor:crosshair;}.TEST:active{ background-color: #00F349; color: #000000; text-align: center; border: thin solid #00F349; line-height: 100px; vertical-align: middle; cursor:crosshair;}
-
I have an Input form type radio, and I have a link to this form in another page; What i'd ilke to do, is that when people press this outside link and go to the form, one of the options be checked.
