change label css class for checkbox if checked - javascript

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')){

Related

input radio does not hide content when unchecked

input radio does not hide content when unchecked, i can't make the content be hidden when the radio input is unchecked
how can I hide the content of the unmarked radio input?
clicking on another radio input is unchecked but does not hide the content
$('#alternar').click(function () {
$('#prueba').toggle();
});
$('#alternarx').click(function () {
$('#pruebax').toggle();
});
/* commented out because this select doesn't appear in the HTML:
$(".placeholder").select2({
placeholder: "Make a Selection",
allowClear: true
});
*/
function uncheckAndCheck(event) {
// gets all radios with the name prefix like 'custom-radio-'
// and uncheck all of them
document.querySelectorAll("input[type='radio'][name^='custom-radio-']").forEach(radio => {
radio.checked = false;
});
// checks the radio that triggered the click event
event.target.checked = true;
}
#prueba{
display:none
}
#pruebax{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
<div id="prueba"> Content1 </div>
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
<div id="pruebax"> Content2 </div>
George's solution works, but is reliant upon the HTML never changing. If you add any element between the radio button and the div, it will break the functionality.
To answer your question related to JavaScript:
It's unnecessary to check and uncheck the other radio inputs. You just need to give them the same name attribute.
Second, you're .toggle()ing the divs on click. That might be why they're acting strangely. You're not checking if the radio button is selected or not, and that's going to result in them toggling even when you click them when they're already selected. Luckily, you can just listen for them to change states.
Third, you can hold a selector for the target of the radio button you want to show/hide in a data attribute, and use one function for all of this.
Fourth, why mix inline onclick attributes, when you're using jQuery? Just listen for the event using the built-in listeners in jQuery.
//jQuery shorthand for $(document).ready(function(){ to be sure your DOM has loaded:
$(function() {
//run this on page load, too. Necessary because browsers will remember which one is checked on a page *refresh*, and hides the target divs initially when nothing is checked:
$checkedRB = $(".rbToggleDiv:checked");
if($checkedRB.length > 0) {
toggleVisibleDivs($checkedRB);
} else {
toggleVisibleDivs(false);
}
//both radio buttons have the same class as well, so you can listen for either of them to change states:
$(document).on("change", ".rbToggleDiv", function(e) {
//this = radio button that has changed
var $thisRB = $(this); //turn it into a jQuery object
if($thisRB.prop("checked")) { //only do something if this RB is checked
toggleVisibleDivs($thisRB);
}
});
function toggleVisibleDivs($targetRB) {
if ($targetRB === false) { //no target sent in
//hide all
$(".pruebaDiv").hide(); //hide all divs
} else { //target sent in
if ($targetRB.data("target-div")) { //make sure the data is set
var targetSelector = $targetRB.data("target-div"), //grab the string from the data object
$targetDiv = $(targetSelector); //use it to select the target div
if ($targetDiv.length > 0) { //make sure the div is selected
//hide all divs with the same class:
$(".pruebaDiv").hide();
//then, show only the one you want visible, the $targetDiv:
$targetDiv.show();
} else {
console.error("Div not found!", targetSelector);
}
} else {
//data not set:
console.error("Data was not set.");
}
}
}
});
.pruebaDiv {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- if they have the same names, they will act as a radio button list, and will act accordingly. Also, you should really choose more descriptive IDs and names: -->
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternarx" data-target-div="#prueba" />
<input type="radio" class="rbToggleDiv" name="rb-toggle-div" id="alternar" data-target-div="#pruebax" />
<!-- for the sanity of the user, I've moved these two divs next to each other below the radio buttons so they don't move around: -->
<div class="pruebaDiv" id="prueba"> Content1 </div>
<div class="pruebaDiv" id="pruebax"> Content2 </div>
This is actually possible entirely with CSS. You can use the adjacent sibling combinator +, which affects an element immediately following the first.
#prueba{
display: none;
}
#pruebax{
display: none;
}
input:checked + #prueba,
input:checked + #pruebax {
display: block;
}
<input type="radio" class="new-control-input" name="custom-radio-1" id="alternarx" onclick="uncheckAndCheck(event)"/>
<div id="prueba"> Content1 </div>
<input type="radio" class="new-control-input" name="custom-radio-2" id="alternar" onclick="uncheckAndCheck(event)"/>
<div id="pruebax"> Content2 </div>

After the condition of a select is met, show or hide further selects

I have the following question because I haven't found anything on the internet. I have created several selects with HTML. The select has the optiions yes / no. The first select checks whether the topic is relevant, if it is not relevant, then the remaining selects for the topic should disappear. I then send the evaluation of the selects with a button (evaluation with php), but would like to have the behavior, directly between the change from yes to no. I am open to all possibilities, be it CSS, HTML or JavaScript. In addition, all of my Selects are in a "div"
On your checkbox, you can add onchange="changeChk()" like this:
<input type="checkbox" id="checkId" onchange="changeChk()">
then in Javascript you can make disappear/appear other checkboxes in this function:
function changeChk() {
if (document.getElementById('checkId').checked) {
document.getElementById("otherchk").classList.remove("hidden");
} else {
document.getElementById("otherchk").classList.add("hidden");
}
with a bit of css:
.hidden {
visibility: hidden;
}
Example where I surround the checkbox with a span to make the label disappear as well:
function changeChk() {
if (!document.getElementById('checkId').checked) {
document.getElementById("spanDisappear").classList.remove("hidden");
} else {
document.getElementById("spanDisappear").classList.add("hidden");
}
}
.hidden {
visibility: hidden;
}
<input type="checkbox" id="checkId" onchange="changeChk()"> this will always be here
<span id="spanDisappear"><input type="checkbox" id="otherchk"> this will disappear</span>
If you have a select, it's (almost) the same.
On your select, you can add onchange="changeValue()" then in Javascript you can make disappear/appear other selects.
Example:
function updateView() {
if (document.getElementById('whateverDDL').value == "yes") {
document.getElementById("spanDisappear").classList.remove("hidden");
} else {
document.getElementById("spanDisappear").classList.add("hidden");
}
}
.hidden {
visibility: hidden;
}
<p>
<select id="whateverDDL" onchange="updateView()"><option value="yes">Of course</option><option value="no">Absolutely not</option></select> this will always be here
</p>
<span id="spanDisappear"><input type="text" id="otherchk"> this will disappear</span>

Tab not appearing unless clicked

I am using <select> element to display a container with info. Using JQuery I display the selected container and hide the rest. In the container I have three <div> elements.
Description
Measurement in CM
Measurement in Inches.
The user has the ability to select which measurement unit to see by clicking on the different tabs. So far it all works great. It does display the info as wanted, however when I re-select different size I can not see any of the tabs info unless I click on one of them. In other words to re-create the issue:
Select size
Change the measurement units
Re-select size
Unless clicked none of the tab will show the info
To make it easier to understand I've created JSFIDDLE.
Can someone possibly have an idea how to keep the cm tab open by default even after the size was re-selected?
Try this: Its working.
http://jsfiddle.net/realdeepak/yjaoccmb/2/
$(function () {
$('#community').change(function () {
var option = $(this).find('option:selected');
var valuer = $(this).val();
$("#tabs-" + valuer).prop('checked', true);
$('#size-single1').toggle(option.hasClass('show1'));
$('#size-single2').toggle(option.hasClass('show2'));
}).change();
});
I added some new class to the input checkbox tag (.cm and .in respectively)
<div class="d-tab"><input checked="checked" id="tab-6" class="cm" name="tab-group-2" type="radio" /> <label for="tab-6"> Centimeters </label>
I also added a new function when selecting on the select size. This function to keep track which measurement is active.
$(".cm, .in").click(function(){
$(".cm, .in").removeClass("active");
if($(this).hasClass("cm")){
$(".cm").addClass("active");
else
$(".in").addClass("active");
});
Lastly I tweaked the css to show the active state
[type=radio]:checked ~ label,
.cm.active ~ label,
.in.active ~ label{
background: #dbd7d7;
z-index: 2;
}
[type=radio]:checked ~ label ~ .measurement-content,
.cm.active ~ label ~ .measurement-content,
.in.active ~ label ~ .measurement-content{
z-index: 1;
opacity: 1;
}
DEMO http://jsfiddle.net/a1jnLq49/

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

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