4

I think what I am trying to achieve can be done in a simpler manner. However I have little JS experience and none in the way of CSS. So I’m utilizing prebuilt CSS and JS code and subtlety modifying it. So I will explain my end goal and see if what I currently have is acceptable.

  1. A top menu on the webpage that has push buttons and checkboxes that all visually look the same
  2. I would like checkboxes to look like buttons, e.g. no checkbox only the label.
  3. I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
  4. Is the way I’m calling the JS code through the button and checkbox correct or too complicated?

JSFiddle

<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>  
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
Community
  • 1
  • 1
JA1
  • 538
  • 2
  • 7
  • 21
  • 3
    Pair the checkbox with a label, hide the checkbox and style the label making it look like a button – Loupax Nov 12 '13 at 11:25
  • Whenever I add the '/** `* Start by hiding the checkboxes */ input[type=checkbox] { visibility: hidden; }` it stops working – JA1 Nov 12 '13 at 11:30
  • 1
    I'd like to add that you should generally never use `onclick` on a checkbox or radiobutton since this doesn't cover other methods of toggling (e.g. via keyboard or clicking on a label). Use `onchange` instead. This is also likely the reason why it doesn't work when you hide the checkbox. – Daniel Perván Nov 12 '13 at 11:34
  • I changed the `onclick` to `onchange` and I still exhibit the same results when I hide the checkbox via CSS – JA1 Nov 12 '13 at 11:39
  • Is there a specific reason you have input elements inside an a tag? – ravb79 Nov 12 '13 at 11:53
  • I am piecing together information to get results. What should I do to correct this? – JA1 Nov 12 '13 at 12:02

3 Answers3

9

.hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

input[type=checkbox]+label {
  color: #ccc;
  font-style: italic;
}

input[type=checkbox]:checked+label {
  color: #f00;
  font-style: normal;
}
<input type="checkbox" class="hidden" name="cb" id="cb">
<label for="cb">text</label>

http://css-tricks.com/almanac/selectors/c/checked/

Won't work on lt IE9 though.

edit: Following your markup it should be something like this:

<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>

And then check if the checkbox is checked or not in your function. onchange / onclick in a checkbox doesn't work in IE

edited again: changed NAME attribute so you won't end up having problems further along the line. And added a little workaround for the unresponsive, though ultimately desired, onchange functionality in IE8. Eventually you should add a timer to your function, rather than inline.

function checkIt(e){
    if(document.getElementById(e).checked){
    alert('checked');
    } else {
    alert('unchecked');
    }
}
showdev
  • 28,454
  • 37
  • 55
  • 73
ravb79
  • 722
  • 5
  • 8
  • This worked for me. I am not worried about the IE9 version since I have a generic CSS that I am loading for IE9 and below thanks. – JA1 Nov 12 '13 at 12:01
  • @user2704746 O, it'll work in IE9. Just not any version up untill IE9. – ravb79 Nov 12 '13 at 13:16
  • I tested earlier I saw that thank it is working perfect and you aided me by adding the color option as well. Thanks again – JA1 Nov 12 '13 at 14:21
8

It is not possible to change the appearence of a checkbox so radically using CSS.

What you CAN do though, is style a label element enough to make it look like a button. Due to the nature of the label element, clicking it will toggle the state of the checkbox keeping your functionality intact.

Here is how to do it

Markup

<li>
    <label for="kml-red-check">I am a button!</label>
    <input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>

Note that I've changed the onclick handler to onchange since now it is impossible to click the checkbox itself. Its value changes though when you click on the label

Styling

label[for="kml-red-check"]{
   //Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
    display:none;
}
Loupax
  • 4,728
  • 6
  • 41
  • 68
  • The CSS I'm using is downloaded as shown in my JSFiddle. I think the entrie code makes the button I'm not sure. – JA1 Nov 12 '13 at 11:36
  • In your fiddle I don't see you use the `for` attribute of the `label` field. The `for` needs to contain the `id` of the checkbox you want to link the label with... – Loupax Nov 12 '13 at 11:40
  • I'm running it on my WAMP server and making changes on there since this code is paired with a large set of JS code – JA1 Nov 12 '13 at 11:48
  • See this Working Example :[FIDDLE](http://jsfiddle.net/rbHXX/2/).this will be useful to you – Sindhu Nov 12 '13 at 11:50
  • Please read the examples written in the answers carefully. The `for` attribute is completely necessary in the labels, and I don't see it anywhere in your code. I'll just leave it here :) – Loupax Nov 12 '13 at 11:56
0
<label>
  <input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
  <span>this is button add some css to lokking like a button</span>
</label>

this will work like button , if you don't want to show checkbox use this

<label>
  <input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
  <span>this is button add some css to lokking like a button</span>
</label>

check it out here https://jsfiddle.net/h0ntpwqk/2/

shubham kucheria
  • 15
  • 3