If element hasClass, check the checkbox using jQuery - javascript

I have a class that adds a fake checkbox and using jQuery, once the user clicks it, add the checked state class to the fake checkbox.
CSS
.fake-checkbox { /* ... */ }
.fake-checkbox.checked-state { /* ... */ }
HTML
<label>
<input type="checkbox">
<div class="fake-checkbox"></div>
</label>
JS
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
} else {
$(this).addClass('checked-state');
}
});
}(jQuery));
Now, I also want to make the input checkbox in its checked state at the same time when the class is added and in its unchecked state when the class is removed.
I know this can be done with element.checked = true but not in jQuery.
How can I achive this?
EDIT
This is surely different and not a duplicate of this question cause we're in a different case, although there's a similarity about 'ticking a checkbox using jQuery' but still not a possible duplicate.
Thanks.

Besides the jQuery answers, i would like to suggest (for this specific case) a CSS only solution, since the checkbox and the .fake-checkbox are siblings.
CSS
.fake-checkbox { /* ... */ }
:checked + .fake-checkbox{ /* ... */ }
HTML
<label>
<input type="checkbox">
<div class="fake-checkbox"></div>
</label>
Demo
.fake-checkbox { color:#ccc; }
:checked + .fake-checkbox{ color:green; }
<label>
<input type="checkbox">
<div class="fake-checkbox">fake</div>
</label>
As for a jQuery answer i would suggest you monitor the state of the actual checkbox instead of manually testing the states.
$('label :checkbox').on('change', function(){
$(this)
.siblings('.fake-checkbox')
.toggleClass('checked-state', this.checked);
})
Demo
$('label :checkbox').on('change', function(){
$(this)
.siblings('.fake-checkbox')
.toggleClass('checked-state', this.checked);
})
.fake-checkbox { color:#ccc; }
.fake-checkbox.checked-state { color:green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox">
<div class="fake-checkbox">fake</div>
</label>

As the checkbox is immediate preceding sibling, you can use .prev() then set the property using .prop() method
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
$(this).prev(':checkbox').prop('checked', false);
} else {
$(this).addClass('checked-state');
$(this).prev(':checkbox').prop('checked', true);
}
});
}(jQuery));
Above code can be simplified as
(function($) {
$('.fake-checkbox').click(function() {
$(this).toggleClass('checked-state');
$(this).prev(':checkbox').prop('checked', $(this).hasClass('checked-state'));
});
}(jQuery));

Try this
$('#yourCheckboxSelector').prop('checked', true);

You can check a checkbox using JQuery.
Using the prop method.
https://learn.jquery.com/using-jquery-core/faq/how-do-i-check-uncheck-a-checkbox-input-or-radio-button/
Use this
HTML
<label>
<input id="real-checkbox" type="checkbox">
<div class="fake-checkbox"></div>
</label>
JS
(function($) {
$('.fake-checkbox').click(function() {
// Check if fake-checkbox has class checked-state, then remove the class checked-state and vice versa.
if ($(this).hasClass('checked-state')) {
$(this).removeClass('checked-state');
$( "#real-checkbox" ).prop( "checked", false );
} else {
$(this).addClass('checked-state');
$( "#real-checkbox" ).prop( "checked", true );
}
});
}(jQuery));

Related

change label css class for checkbox if checked

I have checkboxes that are hidden. I have images as the labels for the checkboxes, so that when the images are clicked the checkboxes are clicked. I am trying to make it so that the image has different opacities depending on whether the box is checked or not. Here is my css for the image label:
.checkbox-label{
opacity: .2;
}
.checkbox-label:hover{
opacity: .5;
}
.checkbox-label-after-click{
opacity: 1;
}
Here is my javascript to move the classes
<script>
$('.checkbox-label').click(function(){
var the_input = $(this).next('input');
if(the_input.checked){
$(this).addClass( "checkbox-label-after-click" );
} else {
$(this).removeClass("checkbox-label-after-click");
}
});
</script>
Basically, when someone clicks on the label, it should grab the next input, which is the checkbox, the label's classes should change. I've also tried switching the addClass and removeClass methods, which makes the class switch work on the first click, but never after.
Here is the html:
How do I get this to work?
I would do this with pure CSS, like this:
label {
cursor: pointer;
}
/* Change cursor when the label is hovered */
input[type=checkbox] {
display: none;
}
/* Hide the ugly default radio styling */
label > span {
opacity: 0.2;
}
/* Hide the checkmark by default */
input[type=checkbox]:checked + span {
opacity: 1;
color: green;
}
/* Show the checkmark when the radio is checked */
<label>
<input type="checkbox" name="obvious"><span>✓</span> I look good.</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> Cause we've been re-styled!</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> I've got a green checkmark if you click me.</label>
<br/>
<label>
<input type="checkbox" name="obvious"><span>✓</span> We are a family of checkmarks!</label>
You can simply use toggleClass(). Your code is not working as the_input is a jQuery object and it doesn't have checked property. You can use .get() to get underlying DOM element.
like
the_input.get(0).checked or the_input[0].checked
As per your code
$('.checkbox-label').click(function(){
$(this).toggleClass( "checkbox-label-after-click", the_input.get(0).checked ); //You can also use the_input.prop('checked')
});
Im guessing its falling down when checking its checked. You will be better off just toggling the class when you click the label
$('.checkbox-label').click(function(){
$(this).toggleClass( "checkbox-label-after-click" );
});
If you really want to check its state, you could do something like this:
$('.checkbox-label').click(function(){
var the_input = $(this).next('input');
if(the_input.prop('checked')){
$(this).addClass( "checkbox-label-after-click" );
} else {
$(this).removeClass("checkbox-label-after-click");
}
});
Use the_input.prop('checked') to see if the input is checked or not. It returns a boolean.
As the_input is a jquery object you cannot use checked property of javascript, you may use the_input[0].checked or use prop method.
Replace this:
if(the_input.checked){
With this:
if(the_input.prop('checked')){

Inside an id div find all the checkbox and check and hide other unchecked

i am trying to learn and create a jquery which $("#answer") and find all the checkbox inside and check. As an example if checkbox inside #a1 is checked other div (a2,a3,a4) is hidden or other message come out. if i uncheck the #a1 all the div will come out again.
Please enlighten me on the code.
<div id="answer">
<div id="a1">A.<input type="checkbox" name="a1" onclick="cbox()" ></input></div>
<div id="a2">B. <input type="checkbox" name="a2"onclick="cbox()"></input></div>
<div id="a3">C. <input type="checkbox" name="a3"onclick="cbox()"></input></div>
<div id="a4">D. <input type="checkbox" name="a4"onclick="cbox()"></input></div>
</div>
function cbox() {
if (this checkbox is checked) {
target other div inside (#answer) and add .hide()
}
}
2)Is there anyway to add a trigger where i don't need to use onlick="cbox" ?
tq
It's better to use .click() instead of inline javascript onclick.
However, you should use .change() event for input elements instead of click:
$('input[type="checkbox"]').change(function() {
$(this).parent().siblings('div').toggle(!this.checked);
});
Fiddle Demo
Use .change() event instead of .click(). Try this:
$('input[type="checkbox"]').change(function() {
$(this).parent('div').siblings('div').toggle(!this.checked);
});
DEMO
Try this:
$("#answer input").change(function () {
if ($(this).is(":checked")) {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "none");
})
} else {
$("#answer input").not(this).each(function () {
$(this).parent().css("display", "block");
})
}
});
DEMO

Toggle parent class of checkbox on check action using jquery

I am trying to make a form with multiple checkboxes. I want to highlight the checkboxes with their content to indicate to the user of the selection
I am using the following layout for my form
HTML
<form>
<div class=labl>
<input type=checkbox id='alpha' />
<label for='alpha'>Checkbox1</label>
</div>
CSS
.labl{
height:50px;
}
.labl:hover{
background:#ccc;
}
.chked {
background: #4285f4;
height:50px;
}
jQuery
<script>
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});
</script>
Now when alpha is checked it should change the class of div from labl to chkedbut it is not
You need a DOM ready handler like this $(function(){...});
$(function () {
$("input[type=checkbox]").change(function () {
$(this).parent().toggleClass("chked");
});
});
Documentation
Update
It appears that the checkbox is dynamically added to the DOM so you must use event delegation like this
$(document).on("change","input[type=checkbox]",function () {
$(this).parent().toggleClass("chked");
});
You can pass both the class names to the toggleClass() method, so that only one of the will be applied at a time
jQuery(function(){
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("labl chked");
});
})
Demo: Fiddle
just change your script to
$("input[type=checkbox]").change(function() {
$(this).parents('.labl').toggleClass("chked");
});
And your HTML to
<form>
<div class='labl'>
<input type='checkbox' id='alpha'></input>
<label for='alpha'>Checkbox1</label>
</div>
Here is the updated fiddle
http://jsfiddle.net/k242J/
toggleClass functionality is to check the class, if not there it will add, else remove class thats it. its not to change from one class to another.
css
.chked {
background: #4285f4;
}
js
$("input[type=checkbox]").change(function() {
$(this).parent().toggleClass("chked");
});

Add jquery when radio button is selected

I have two radiobuttons in one group.
The first is checked if you visit the page by 'checked' in html..
I want to use javascript to adjust some css (through javascript, not by adding a class).
So if the first is selected, I want a certain class to get a display:none and an other class a display:block, but when the second radio button is selected, I want the the same as with the other radio button only and vice versa.
My html is:
<li><input type="radio" name="kosten" id="maand" checked><label for="maand">per maand</label></li>
<li><input type="radio" name="kosten" id="jaar" ><label for="jaar">per jaar</label></li>
I tried some jquery but I'm really bad at it.
if ($('input#maand').is(':checked'){
$('.bedrag-jaar').css('display', 'none');
}
Some examples of the divs I want to show up and disappear.
<li><strong><span class="bedrag-maand">some text</span> <span class="bedrag-jaar">some other text</span></strong></li>
Do you have any idea how i can get this working?
Try something like
jQuery(function(){
var $spans = $('span[class*="bedrag"]').hide();
$('input[name="kosten"]').change(function(){
$spans.hide();
$spans.filter('.bedrag-' + this.id).show();
})
})
Demo: Fiddle
it can be done much powerful, if you can add an additional class to the bedrag-* elements like
<li><strong><span class="bedrag bedrag-maand">some text</span> <span class="bedrag bedrag-jaar">some other text</span></strong></li>
then
jQuery(function(){
var $spans = $('.bedrag').hide();
$('input[name="kosten"]').change(function(){
$spans.hide();
$spans.filter('.bedrag-' + this.id).show();
})
})
Demo: Fiddle
Here is the code and try this:
$( "input[type=radio]" ).on( "click",function(){
if ($('#maand').is(':checked')){
$('.bedrag-maand').css('display', 'block');
$('.bedrag-jaar').css('display', 'none');
} else {
$('.bedrag-jaar').css('display', 'block');
$('.bedrag-maand').css('display', 'none');
}
});
JSFIDDLE

Listen to bootstrap checkbox being checked

I am using bootstrap theme called: Core Admin
http://wrapbootstrap.com/preview/WB0135486
This is the code I write:
<div class="span6">
<input type="checkbox" class="icheck" id="Checkbox1" name="userAccessNeeded">
<label for="icheck1">Needed</label>
</div>
And bootstrap generates me this code:
<div class="span6">
<div class="icheckbox_flat-aero" style="position: relative;">
<input type="checkbox" class="icheck" id="Checkbox7" name="userAccessNeeded" style="position: absolute; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>
<label for="icheck1" class="">Needed</label>
This is the result:
So basically it makes a pretty checkbox for me. Each time I click on the checkbox, it will add a checked class to the div:
<div class="icheckbox_flat-aero checked" style="position: relative;">
So at first I wanted to listen the input field being changed like this
$('input[type="checkbox"][name="userAccessNeeded"]').change(function () {
if (this.checked) {
}
});
But it doesn't actually change the input field, but rather changes the class of <div> element.
How could I listen to checkbox being checked?
$('input#Checkbox1').change(function () {
if ($('input#Checkbox1').is(':checked')) {
$('input#Checkbox1').addClass('checked');
} else {
$('input#Checkbox1').removeClass('checked');
}
});
i solve it that way.
The template looks to be using https://github.com/fronteed/iCheck/, which has callbacks:
$('input[type="checkbox"][name="userAccessNeeded"]').on('ifChecked', function(event){
alert(event.type + ' callback');
});
Or there is also:
$('input[type="checkbox"][name="userAccessNeeded"]').iCheck('check', function(){
alert('Well done, Sir');
});
Which should work with a whole range of methods:
// change input's state to 'checked'
$('input').iCheck('check');
// remove 'checked' state
$('input').iCheck('uncheck');
// toggle 'checked' state
$('input').iCheck('toggle');
// change input's state to 'disabled'
$('input').iCheck('disable');
// remove 'disabled' state
$('input').iCheck('enable');
// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');
// remove 'indeterminate' state
$('input').iCheck('determinate');
// apply input changes, which were done outside the plugin
$('input').iCheck('update');
// remove all traces of iCheck
$('input').iCheck('destroy');
Link to the Documentation: http://fronteed.com/iCheck/
You need to bind to the ifchecked event via
Use on() method to bind them to inputs:
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
this will change the checked state
$('input').iCheck('check'); — change input's state to checked
This worked for me
jQuery('input.icheck').on('ifChanged', function (event) {
if ($(this).prop('checked')) {
alert('checked');
} else {
alert('unchecked');
}
});
Finally solved it like this, since I am clicking on a div element, then I must listen click event of that, and then check if the div has class and what is the id of checkbox.
$('.iCheck-helper').click(function () {
var parent = $(this).parent().get(0);
var checkboxId = parent .getElementsByTagName('input')[0].id;
alert(checkboxId);
});
Just my five cents, if anyone would have the same problem..
I needed the exact checkbox states. Toggle not worked here. This one has done the required state delivery for me:
$('.iCheck-helper').click(function () {
var checkbox = $(this).parent();
if (checkbox.hasClass('checked')) {
checkbox.first().addClass('checked');
} else {
checkbox.first().removeClass('checked');
}
doWhateverAccordingToChoices();
});
#Srihari got it right except the selector. Indeed the input isn't modified onclick, but the div do :
$('.icheckbox_flat-aero').click(function(){
$(this).find('input:checkbox').toggleClass('checked'); // or .find('.icheck').
});
Hey i hope this logic should work for you
JS CODE:
$('.icheckbox_flat-aero').on('click',function(){
var checkedId=$(this,'input').attr('id');
alert(checkedId);
});
This way a general event is added for all the checkbox`s
Happy Coding :)
Looking at your question and working with bootstrap since the past 1 year, I can definitely say that the checked class being added is not done by bootstrap. Neither is the checked class being added is a property which is built into BS 2.3.*.
Yet for your specific question try the following code.
$('.icheck').click(function(){
$(this).toggleClass('checked');
});
You can get a working example here.
Update 1:
The Checkbox cannot be styled by color using CSS. Hence, the developer is using insert tag to delete the Checkbox and put in his styling code. In effect, the CSS and JS in the specified theme do the styling by putting in the new stylized code.
Instead you can listed to the click event on the div icheckbox_flat-aero.
$('.icheckbox_flat-aero').children().on('click',function(){
alert('checked');
});
Check for the example http://jsfiddle.net/hunkyhari/CVJhe/1/
you could use this:
$('input#Checkbox1').on('ifChanged',function() {
console.log('checked right now');
});

Categories

Resources