I am writing a program in which when a user click on check box , the font of the input (which i am writing) changes. Like firstly if the check box is unchecked the font is 'arial' and when the check box is checked the input font should become 'verdana'.
I am able to do this but the function changes all the previous text written into verdana.
Code Sample:
<input type= "checkbox" onchange = "tests();" name="remember" id = "remember"> **(Checkbox)**
function tests(){
if (remember.checked == 1){
$(.form-control).css('font-family','verdana');
}else{
$('.form-control').css('font-family','arial');
}
}
i need that whenever i check this , the upcoming data should be in verdana and the previous should remain same in input box.
Instead of changing the font of whole form class $(.form-control) do it for specific class of checkbox
Update:
add this css
input[type=checkbox]:checked + label {
font-family:'verdana'
}
input[type=checkbox] + label {
font-family:'arial'
}
In your code you seem to be using JQuery, so you can do this:
$("#remember").change(function() {
if ($(this).is(":checked")) {
$(".myText").css("font-family", "Verdana");
} else {
$(".myText").css("font-family", "Arial");
}
});
Here is the JSFiddle demo
Related
I want my checkboxes's label to highlight when on and off (like a IRL switch) and I'm not figuring out how to reach all of them without having to make a listener for each of them (I belive there must be some way)
Checkboxes be like:
<label id="labeltest"><input id="checkboxtest" type="checkbox" name="diet" value="Egg" hidden/>Egg</label>
JS be like:
var labeltest = document.getElementById("labeltest")
labeltest.addEventListener("click", function () {
if (this.firstChild.checked) {
this.classList.remove("unchecked")
this.classList.add("checked")
} else if (this.firstChild.checked === false) {
this.classList.remove("checked")
this.classList.add("unchecked")
}
});
I've tried with class instead of ID but didn't work
Also tried something like this with classes to make labeltest an array:
labeltest.forEach(element => {
element.addEventListener("click", function () {
(FUNCTION HERE)
});
But didn't work either
You don't need any JavaScript to accomplish this.
If you reorder your input and labels like this:
<input id="diet-egg" type="checkbox" name="diet" value="Egg" hidden/>
<label for="diet-egg">Egg</label>
Important: Be sure that the for attribute value matches the id of the input the label is connected to. This enables checking and unchecking the checkbox by clicking the <label> element.
Then you can use the adjacent sibling selector + to define the styles of the label whenever the input is checked and unchecked.
input + label {
/* unchecked label styles */
}
input:checked + label {
/* checked label styles */
}
I am writing a client side script to clean up the system that my college uses, and I am having an issue with a personal completion feature. What I have is an add-on that injects a <script> element into the DOM, and in this way I can modify the UI. However, I've run into an issue.
I have added some checkboxes to 'UnitBlocks' that allows me to check units that I have completed but the college hasn't uploaded yet. These trigger a JQuery event that allows me to tick the boxes and then change the color of the UnitBlock to yellow (see below for code):
var pc = false;
$(this).find('#personalCompletion').click(function(){ // personal completion is the checkboxId
if (pc === false)
{
$(this).closest('a').css('background-color', '#FFCC45 !important');
$(this).closest('a').children('p').text('Done');
pc = true;
}
else
{
$(this).closest('a').css('background-color', '');
$(this).closest('a').children('p').text('In Progress');
pc = false;
}
$(this).closest('p').append(' <input type="checkbox" id="personalCompletion"></input>'); //this re appends the checkbox
});
This works fine and it allows me to tick/untick the box. However, when I reload the page they dissapear, so I decided to store a cookie using JS with the tickbox values stored as "302": "yes", "304": "no", "313": "yes". The numbers are the unit numbers and the yes/no is if the boxes are ticked or not (this cookie is manual and for testing purposes). My code then goes onto pull the cookie for each UnitBlock, and dependant on the yes/no value of the cookie, it sets the tick box (please see below for my code)
var cookieValues = getCookie('completedUnits');
for (var i = 0; i <= cookieValues.length; i++)
{
if (cookieValues[i].includes($(this).attr('data-modcode'))) //data-modcode is a custom attribute with the unit number in (302 etc.)
{
if (cookieValues[i].text().indexOf('yes') >= 0) //if it includes the word 'yes'
{
$(this).find('#personalCompletion').attr('checked');
}
}
}
This doesn't throw an error or anything, it just doesn't tick any boxes...
You should use the .prop() method to change checked property (just like selected and disabled properties, too) representing and changing state of form elements.
There's big difference between checked property and checked attribute: the attribute represents defaultChecked property value, which is just initial state of the input, while the checked property changes state of the checkbox.
$(function() {
var $checkbox = $('#checkbox');
$('.debug').text($('.debug').text() + '\n' +
$checkbox.attr('checked') + '\n' +
$checkbox.prop('checked'));
$('#button').on('click', function() {
$checkbox.prop('checked', !$checkbox.prop('checked'));
$('.debug').text($('.debug').text() + '\n' +
$checkbox.prop('checked'));
});
});
.debug {
white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" checked/>
<input type="button" id="button" value="click me!" />
<div class="debug"></div>
I have a form with multiple HTML checkboxes. I want to hide some dividers only if at least one checked checkbox have a custom HTML5 attribute called "terminator". Otherwise I would want to show the dividers.
I tried to accomplish this by using the change() event to check if one has the terminator attribute.
Here is what I have done.
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
//Hide all groups that have the class equal to className
if( $(this).is(':checked') ){
if( $(this).data('terminator') ){
hideControls($(this), existingElements, className);
}
} else {
showControls(existingElements, className);
}
}).change();
The function hideControls will hide the desire inputs. The function showControls will display the desired inputs if any are hidden.
My code kinda works, but has one problem that I can't figure out a solution to. The problem happens after checking a box that has the terminator attribute and checking a box that does NOT have the terminator attribute, and then "un-checking" a box that does NOT have the terminator attribute.
When first checking the box with the terminator attribute the dividers hide as expected.
Then when un-checking a box that does not have a terminator attribute it shows dividers that should be hidden with appear since I still have 1 checked box with the terminator attribute.
How can I fix this problem?
I created this jFiddle to show the code and the problem in action. You can re-create the problem by jumping into the "1:b) More Questions" section on the jFiddle, then check the "Red" box and then the "Green - Terminator" box, and finally unchecking the "Red" box. You will see how the dividers below will appear where they should be hidden since "Green - terminator" is still checked"
You should be checking for the "checked" status of the checkbox with data-terminator attribute set on each change.
Something like
$("input[type='checkbox']").change(function(e) {
var className = 'terminated_' + getContronId($(this).attr('name'));
var existingElements = $('#survey-optional-controls').val().split('|') || [];
var isTerminatorChecked = $("input:checkbox[data-terminator='Yes']").is(":checked");
//Hide all groups that have the class equal to className
if (isTerminatorChecked) {
hideControls($(this), existingElements, className);
} else {
showControls(existingElements, className);
}
});
Updated fiddle
To make sure that showControls will only get invoked when the checkbox with the data-terminator attribute gets unchecked,
change this :
...
} else {
showControls(existingElements, className);
}
to
...
} else if ($(this).is("[data-terminator]")) {
showControls(existingElements, className);
}
Updated jsFiddle: http://jsfiddle.net/8yf0v3xt/10/
the code below said 'If any input that have the type checkbox is changing'
$("input[type='checkbox']").change(function(e) { /*hide*/ }
else { /*show*/}
when you uncheck the "red" checkbox this="red", and red is not checked so... it automatically go to the else statment which in to show divider
I am a beginner in learning Jquery.
I tried a simple sign up form in jquery.
here,if the username and password is not entered in the text box then a label is displayed with span saying"Please fill the username".
How to change the span font color?
Here is my code:
if(user=="") {
$('#dis').slideDown().html("<span>Please type Username</span>");
return false;
}
Thank you...
Just apply color in your span.
if(user=="") {
$('#dis').slideDown().html("<span style='color:green'>Please type Username</span>");
return false;
}
Or you can apply some class, then add the style into that.
if(user=="") {
$('#dis').slideDown().html("<span class='colorspan'>Please type Username</span>");
return false;
}
.colorspan
{
color:green;
}
I have a form which uses dynamic styling. Consider this html
<div class="field-name field-form-item">
<label class="placeholder" for="name">Name</label>
<input class="form-input" id="name" type="text" name="name" maxlength="50" size="30">
</div>
The label is ABOVE the input, with CSS. When you click the label :
$('.placeholder').on('click focus', function() {
$(this).addClass('ph-activated');
$(this).siblings('input').focus();
})
Then the label is animated and let the user type in the input.
If the user dont wan't to write anything, the animation goes back, and hide input field :
$('input').on(' blur', function(){
if ($(this).val().length === 0) {
$(this).siblings('label').removeClass('ph-activated');
}
});
That's alright.
But when a user fill the input, THEN refresh the page and its browser didn't reset input fields(ie firefox) : the label is above the input, even if the latter is not empty.
I tried this :
$(document).ready(function() {
if ($('input').val().length) {
$(this).siblings('label').addClass('ph-activated');
}
})
But it doesn't seem to trigger, I tried several ways to write this function. Up to now I never managed to give the class ph-activated to a label with a filled input on page refresh.
Sorry I can't fiddle this. I just have far too much html/css/js/php to copy paste
Well you are targeting wrong element in $(document).ready because you are referring label with this thinking that $(this) is input whereas it is document. So try applying below code and I hope there will be multiple input elements in page, so I've used $.each and looping through all the inputs
$(document).ready(function() {
$('input').each(function(){ //loop through each inputs
if ($(this).val().length) {
$(this).siblings('label').addClass('ph-activated');
}
});
})
DEMO - Inspect the label and you will find ph-activated class added to label
Try this one:
$(document).ready(function() {
var length = $('input').filter(function( index ) {
return ($(this).val() !== '');
}).length;
if (length > 0) {
$(this).siblings('label').addClass('ph-activated');
}
})