Make a checkbox look like a button CSS - javascript

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.
A top menu on the webpage that has push buttons and checkboxes that all visually look the same
I would like checkboxes to look like buttons, e.g. no checkbox only the label.
I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
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>

.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');
}
}

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;
}

<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/

Related

toggleClass() is not working as expected on label click

Alright, I'm working on a solution for custom checkboxes, I nest checkbox inside label and hide it, add some css to labels pseudo elements to display custom checkbox.
Now I want to add class .checked to a label on its click so related styles are applied, but for some reason I can't seem to get toggle class working, it simply doesn't add the class (addClass and removeClass) work, but thats a bit of a "dirtier" sollution.
JS
$('.label-checkbox ').on('click', function() {
$(this).toggleClass('checked');
});
HTML
<label class="label-checkbox" for="show-news">show news posts
<input type="checkbox" name="show-news" id="show-news">
</label>
Fiddle
https://jsfiddle.net/hhsxyknf/
No need to bind click on label, you can just call on change of the checkbox.
$('input[name="show-news"]').on('change', function() {
$(this).closest('label').toggleClass('checked');
});
.checked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label class="label-checkbox" for="show-news">show news posts
<input type="checkbox" name="show-news" id="show-news">
</label>
What you are doing is right, AFAIK. Check out this, do you want something like this? You may need to consider binding the event with the change event of the <input> than the <label>:
$(function () {
$('.label-checkbox input').on('change', function() {
$(this).closest(".label-checkbox").toggleClass('checked');
});
});
.checked {font-weight: bold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label class="label-checkbox" for="show-news">show news posts
<input type="checkbox" name="show-news" id="show-news">
</label>
When label is clicked, you also click the checkbox; thus, you get two clicks and your class toggle goes to checked then immediately removes it.

How to display different content when a user selects a radio button?

I want make one feature. HTML/PHP is no problem, but my JavaScript skill is really low. I know how to use it, but I don't know how to write such a thing. It should look like this example.
Under the picture, there's something called a "MILESTONE" - but in this case, the action is onhover. I want to use the onclick event and a set of radio buttons. When the user clicks on one of the three radio buttons, the page will change the picture and the description, depending on which one was clicked - and without refreshing the page.
I don't really get how it works, but if each option were one single page and I could just include them all, it would be ideal.
Your question is fairly broad, so I'm going to focus on the task of swapping visible content on a fired event.
Writing this in jQuery, but you should be able to translate it if you're not using JQ:
HTML:
<input type="radio" name="picker" class="picker" value="1"/>
<input type="radio" name="picker" class="picker" value="2"/>
<input type="radio" name="picker" class="picker" value="3"/>
<ul class="content">
<li><img src="foo1"/></li>
<li><img src="foo2"/></li>
<li><img src="foo3"/></li>
</ul>
CSS:
.content li { display: none; }
.content li.active { display: block; }
JavaScript:
$('.picker').on('click', function() {
$('.content .active').removeClass('active');
$('.content li').eq($(this).val() - 1).addClass('active');
});
Working example: http://jsfiddle.net/9SdvZ/1/
If your skills are good enough in HTML & CSS then you will know how to style it properly. Here is a sample code I have just done that has the JavaScript (functionality).
Live example: http://embed.plnkr.co/xdpHX9FplgLgh9pN7lWZ/preview
Explanation:
You will have the following HTML markup:
<div id="controls">
<input type="radio" name="slide" value="slide1.html"> 1
<input type="radio" name="slide" value="slide2.html"> 2
<input type="radio" name="slide" value="slide3.html"> 3
</div>
And you will have the following JavaScrit using jQuery:
$(function(){
$('#controls').on('click', ':radio', function(e) {
var target = $(e.target);
$.get(target.val(), function(data) {
$('#content').html(data);
});
});
});
Basically, the JavaScript (using jQuery) will do the following: after clicking a radio button the <div id="controls" />'s content will be replaced with the content of the file specified in the radio button value attribute.

stop label from toggling the input checkbox

I have the following html code. When clicking on the label it toggles the checkbox.
<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>
How can I prevent this? If I remove the for="startClientFromWebEnabled", It stops toggling but I need this because I have some logic that takes the id from the element that fires the event ...
The best solution would be to let label toggle the checkbox as that is intuitive and expected behaviour.
Second best solution is to make sure your checkbox is not nested inside label and label does not have for attribute. If you have some logic that depends on it, you can put data attributes on elements and use those in your logic.
<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>
Last resort
You could prevent the default behaviour of the click event using jQuery:
$('label[for="startClientFromWebEnabled"]').click(function(e) {
e.preventDefault();
});​
Please see this jsFiddle for an example.
There is CSS solution too:
label {
pointer-events: none;
cursor: default;
}
if you are using JQuery, add an id on your label then
add this in your script:
$("#lbl").click(function(){
return false;
});
Just prevent default on label or any part of label, if desired.
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>
or
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label for="1">foo some part <span class="prevent-default">not</span> clickable</label>
"I have some logic that takes the id from the element "
You could remove the for-attribute, if you store the ID somewhere else. For example in a data-*-attribute:
<label data-input-id="startClientFromWebEnabled">
On the other hand, it is sometimes difficult to point and click an a check-box based on the styling and the capabilities of the user. There is are good reasons for using the for-attribute.

Why customized radio buttons are not getting disabled?

I am using this plugin to customize check boxes and radio buttons on a page.
These radio buttons are in a div#Main element which comprise of some other HTML elements also. I need to disable everything in this div on a button click (I am using jQuery). For this I have the following code,
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
Script
$(function(){
$('#DisableElements').click(function(){
$('#Main').find('*').attr('disabled', 'disabled');
});
});
Issue: Everything got disabled correctly except the radio buttons.
Behind the scenes, the plugin script hides the actual radio button and
put a span over the radio buttons like a blanket. This span has
got a background image sprite with different states (on and off) which
gets updated accordingly on radio button selection. This was the
working of this plugin.
I could have used the inbuilt method of the plugin to disable/destroy the functionality but I did not find any method for this.
images loads with little delay after the DOM has finished loading,
so you can try calling your function in $(window).load().
hope it will help.
The solution i made can be thought of as a patch but works nice (for my scenario at least). What should have been the right approach for this would be using some existing API method to reflect the change, something like disable() or similar but i did not find such method or something like this.
Solution: Making the radio buttons appear like disable (non clickable).
Because i do not want to dig into the plugin js file. For this i made a transparent div with some width and height enough to cover the radio buttons and place it over them like a layer between radio buttons and cursor. This div is hidden by default and show this while making controls disable. keeping it short and sweet, here are the code changes.
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<div id="Blanket"></div>
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
CSS - for blanket div
#Blanket
{
position:absolute; /*Imp: otherwise it will disturb the UI*/
width:100px;
height:100px;
display:none;
/* top/left adjustments, if required! */
}
Script
$(function(){
$('#DisableElements').click(function(){
$('#Blanket').show();
$('#Main').find('*').attr('disabled', 'disabled');
});
});
This solution however needed to drop the fear of what if someone using developer tools to out smart the application but that does not matter any way. Besides, you can-not 100% block the user from using such tools.
Another solution which worked and looks more appropriate: Placing invisible blanket over input controls sounds like a patch and can be easily snapped. The plugin script adds a CSS class named styled and requires to add following styles to achieve customized look and feel.
input.styled
{
display: none; // hides the parent input element
}
Because of this, even if we switch button states to disable, the changes did not reflect because the parent element was hidden making the other listeners difficult to attach. By changing the styles to following, everything worked.
input.styled
{
position: absolute;
opacity: 0;
}
It makes the parent input element invisible but completely active on DOM behind the scenes.

Radio Button Selection

I want to show few text fields on click of a radio button ,how can i do it? without JavaScript or AJAX.
You must employ JavaScript for this.
The only other thing besides JavaScript that might work (I haven't tried it but it's something to investigate) is to use the :focus pseudo class in CSS. Even if it works it won't be cross browser probably, but since you're targeting specific mobile platforms it might be OK. It would work like this:
<style>
#bar { display:none; }
#foo:selected #bar { display:block; }
</style>
<input type="radio" id="foo">
<label for="foo"><div id="bar">Stuff goes here</div></label>
I don't know if :focus also applies to a form element's associated label, but it certainly may considering that clicking an element's label does activate the "click" event on the form element it's labeling.
Something to try anyway. If you're targeting mobile Safari that should have good support for these kind of selectors.
Yes, can you do this with a psudo-class selector but it certainly will not work cross browser. You can check:
http://www.quirksmode.org/css/contents.html
for a list of what browser support what selectors. IE 7 and lower do NOT support the :focus selector, although you could accomplish roughly what you want with :hover (although I imagine you don't want it to show only on hover).
The following example works in Firefox (3.5):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<style>
input { float: left; }
/* Make the text hidden when the page loads */
.text_to_show { display:none; }
/* This style affects element which immediately follows the focused class */
.trigger:focus + div.text_to_show { display: inline; }
</style>
</head>
<body>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the first radio button.</div>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the 2nd radio button</div>
</body>
</html>

Categories