Having trouble using jQuery change() with checkboxes - javascript

I'm trying to add/remove a class and attribute to a few labels and input boxes depending on whether or not a checkbox is checked or not.
By default my check box is set up to be not checked. Here is my existing code...
$("#built").change(function()
{
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
}).change();
For some reason the event isn't firing. What am I doing wrong? Thanks!
Update:
Here is my html code
<label for="address1" class="readonly">Address Line 1</label>
<input type="text" name="address1" class="readonly" readonly="readonly" value="" />
Also, upon the check box being unchecked I would like the labels and inputs to revert back to its original state of having the readonly class and attribute respectively.

Remove the .change() after the function and add a ;.
eg:
$("#built").change(function(){
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
});

There is no reason your code won't work, maybe just indentation or something like this.
Here is a jsfiddle with your function and it's working.
I just removed the line break like this:
$("#build").change(function() {
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
});
Maybe there are other javascript problems somewhere else in the page?

Related

jQuery :checked not working with initial (HTML attribute) radio input

Please inspect the following Console output, note that the 1st input has checked attribute and is selected:
You can see I have 2 radio inputs, 1 is checked, however neither selector nor prop nor is works for it. The code works correctly if I manually click on one of the radio. Here is my HTML:
<div class="col-sm-6">
Type:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="generator-type" id="opt-type-passphrase" value="0" autocomplete="off" checked>
Passphrase
</label>
<label class="btn btn-default">
<input type="radio" name="generator-type" id="opt-type-password" value="1" autocomplete="off">
Password
</label>
</div>
</div>
Why is the code not working when the page loads when I haven't clicked any radio? Is there a way to fix it?
EDIT: Found the problem, I have this code in the page load:
$("input[name='generator-type'][value=" + this.Options.Type + "]").prop("checked", "");
The correct solution is using:
.prop("checked", true)
But can anyone please explain how it work? Why is there the checked attribute, but prop function is still false?
Try .is(':checked') instead of .is('checked'). Please check this Fiddle.
You need to check like this
$( ... ).is(':checked')
Why? Because the jquery is method accepts a css selector which it uses to filter the currently matched elements.
Thus temp.is('checked') will only be true if the temp elements have the checked tag. In your case they have the input tag so do not match.
Using :checked matches on the css pseudo selector for whether the current element is checked or not. This is what you want.
Knowing this, you could also use $( ... ).is('[checked]'), which will return true if the matched elements have the checked attribute. That's probably what you were trying to do originally. Though, the conventional way is to use :checked.
You're missing a colon in the is-checked code:
temp.is(":checked")
instead of
temp.is("checked")

Checkbox always On

Why this code always alert "on"? No matter if it's checked or unchecked, it always print on.
click:
<input type="checkbox" onclick="alert(this.value)" />
http://jsfiddle.net/5yn78jhz/
Use "this.checked" instead of "value" to get true or false for checked or unchecked.
Your checkbox doesn't have a value, so JavaScript uses the default value. If you want something else, you'll need to use the value attribute value="some value". Also, the code isn't checking to see if the checkbox has been checked or not, so it will always give you the value of the checkbox, whether it's checked or not.
For example
<input type="checkbox" onclick="if(this.checked) { alert(this.value); }" />
Will only display something if the checkbox is checked.
This is the way onclick action works. You can use a js function to check if is true/false like this:
html
<input type="checkbox" onclick="check(this)" />
js
function check(obj){
if(obj.checked){
alert(obj.value);
}
}
fiddle

Populate input field based on checkbox id values

I have an input field defined like this:
<form class="form-inline">
<input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
</form>
I wrote up a mock jQuery script just to put the word "Yes" based on whether a checkbox has been checked. Look here:
$(document).ready(function () {
$('#checkbox').change(function(){
if ($('#checkbox').is(':checked')) {
$("input[Title='language']").val("Yes");
}
});
});
However, it's not working and there are no errors in the console. I'm new to jQuery and am having a hard time understanding where exactly to put it, and how $(document).ready(function () { functions, so that may be the problem.
The non-working example can be seen here http://dreaminginswahili.com/admin/mapv4.html on the languages pane.
$('#checkbox') looks for an element with id="checkbox", like this
<input type="text" id="checkbox" />
but you don't have any in your html, so nothing happens.
If you have checkbox elements like <input type="checkbox" />, then you can select the checkboxes like this:
$(':checkbox')
and you can select the "checked" boxes like this:
$(':checkbox:checked')

How to switch styles for labels using jQuery

I have checkbox. I want to switch the style of the div containing the checkbox, if the checkbox is checked.
<label for="ids">
<div>
<img src="img/87_1180.jpg">
<h4>Name</h4>
<input name="ids" id="ids" type="checkbox">
</div>
</label>
When user clicks on the label, the checkbox gets checked. I want to add class if the checkbox is checked.
I appreciate any help.
$("#ids").click(function() {
$(this).parent().toggleClass("yourClassName");
});
Josh,
Actually usually the correct way to use a label would be something like this:
<label for="ids">Name</label>
<input name="ids" id="ids" type="checkbox" />
I don't think it's common practice to put the input within the label according to W3C standards, see:
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
While it might validate the way you wrote the code, it's much harder to control style specifically.
Try this code to change the label:
$("#ids").click(function() {
$('label[for="' + $(this).attr('name') + '"]').toggleClass('myClass');
});

HTML checkbox onclick called in Javascript

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.

Categories

Resources