Develop Reference

checkbox onclick wont change checked via jscript

I have 3 checkboxes, i wish to be able to click the box and it tick on/off and via jscript change the value of the input for posting to state weather item is accepted or not on another page. However i have logical script but it wont work, theres no errors but the checkboxes wont click on/off they just click on and thats it.. and the value wont change either i dont understand why.
Could somebody look at this short code and tell me why.
Thank you.
<input type="checkbox" id="paypal" name="paypal1" value=" " onclick='chbxpp();' >
</input>
<label for="paypal" class="checkboxes" >Show PayPal Accepted</label>
<br>
<input type="checkbox" id="facebook" name="facebook" value=" " onclick='chbxfb(this);' >
</input>
<label for="facebook" class="checkboxes" >Show FaceBook Contact Details</label>
<br>
<input type="checkbox" id="twitter" name="twitter" value=" " onclick='chbxtw(this);' >
</input>
<label for="twitter" class="checkboxes" >Show Twitter Contact Details</label>
function chbxpp()
{
if(document.getElementById('paypal').checked === true) {
document.getElementById('paypal').checked = false;
document.getElementById('paypal').value='no';
var vv=document.getElementById('paypal').value;
console.log(vv);
}
if (document.getElementById('paypal').checked === false) {
document.getElementById('paypal').checked = true;
document.getElementById('paypal').value='yes';
var vv=document.getElementById('paypal').value;
console.log(vv);
}
}
function chbxfb(objfb)
{
var that = objfb;
(objfb);
if(document.getElementById(that.id).checked === true) {
document.getElementById(that.id).checked = false;
document.getElementById(that.id).value='no';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
if (document.getElementById(that.id).checked === false) {
document.getElementById(that.id).checked = true;
document.getElementById(that.id).value='yes';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
}
function chbxtw(objtw)
{
var that = objtw;
(objtw);
if(document.getElementById(that.id).checked === true) {
document.getElementById(that.id).checked = false;
document.getElementById(that.id).value='no';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
if (document.getElementById(that.id).checked === false) {
document.getElementById(that.id).checked = true;
document.getElementById(that.id).value='yes';
var vv=document.getElementById(that.id).value;
console.log(vv);
}
}
The objpp was my attempt at another method but just does the same thing...
p.s if i just didnt use jscript and just had the html, would the value not be valid if the checkbox was not clicked or would the value still be sent...
iv just fond this..
How to change the value of a check box onClick using JQuery?
states that the value wont be sent if the box is unchecked... But then how do i know after post what has been clicked.... will i receieve a not isset($_POST['paypal']) or an empty($_POST['paypal'])

I imagine your checkboxes begin with no check inside them or .checked === false, but when you call your function chbxpp(), it looks to see if your .checked property === true and if so it sets it back to false. The click event already changes the checkbox's .checked property for you, no need to do it in your code.
//If the checkbox is checked, set it to not checked...???
//But the problem is, the click event just set the .checked property to true
//so setting it back to false makes it like it never happened.
if(document.getElementById('paypal').checked === true) {
//document.getElementById('paypal').checked = false; //This part is a no-no
document.getElementById('paypal').value='yes';
}else{
document.getElementById('paypal').value='no';
}

Adding to Ryan Wilson's answer, set your cbx's initial value to false. (Also check the format of the cbx - the closing tag.)
<input type="checkbox" id="paypal" name="paypal1" value="false" onchange="chbxpp();" />
function chbxpp() {
// the cbx starts false. when it is clicked for the first time it
// becomes true.
if (document.getElementById('paypal').checked) {
// you don't need this.
//document.getElementById('paypal').checked = true;
document.getElementById('paypal').value = 'yes';
var vv = document.getElementById('paypal').value;
console.log(vv);
} else {
// you also don't need this.
//document.getElementById('paypal').checked = false;
document.getElementById('paypal').value = 'no';
var vv = document.getElementById('paypal').value;
console.log(vv);
}
}

Popups for checking/unchecking a checkbox

I have prompts that produce a popup when a box is ticked and unticked. There looks to be a line of redundant code, but when removed the functions no longer work. So maybe not so redundant:-) But the #id doesn't match to anything (currently set as CAPS to not match)
Any ideas why this is interfering?
$('#checkbox').click(function() {
if ($("#checkbox").is(':checked')) {
if (confirm('Are you sure you want to CONFIRM the order?')) {
$('#CHECKBOX').click();
}
}
});
$("#checkbox").on('change', function() {
this.checked = !this.checked ? !confirm('Do you really want to change this to NOT RECEIVED?') : true;
});
http://jsfiddle.net/5nd1wj54/1/

Here is what I think you mean
$('#checkbox').click(function() {
if (this.checked) {
this.checked = confirm('Are you sure you want to CONFIRM the order?'));
}
else {
this.checked = !confirm('Do you really want to change this to NOT RECEIVED?');
}
});

Use classes instead ids, so now redundant code needed. You can store informations in the data attribute of a HTML element. jsFiddle.
I've add a class to every checkbox what should be examined.
$(".checkIt").on('change', function() {
if ($(this).is(':checked')) {
confirm('Do you really want to change ' + $(this).data('id') + ' to NOT RECEIVED?');
}
});
HTML
<input type="checkbox" data-id="checkbox1" class="checkIt" />
<input type="checkbox" data-id="checkbox2" class="checkIt" />
<input type="checkbox" data-id="checkbox3" class="checkIt" />

Adding a Javascript onClick event to a HTML checkbox has prevented me from 'unchecking' the checkbox

Here is my function
function toggleCheckbox (element) {
if(document.getElementById("checkbox").checked = true) {
document.getElementById("strAPISuccessURL").value = "http://www.gladstonebrookes.co.uk/thank-you/";
}
else {
document.getElementById("strAPISuccessURL").value = "http://www.gladstonebrookes.co.uk/the-call/";
}
}
and the function is called on a checkbox onClick event
<input type="checkbox" name="checkbox" id="checkbox" onchange="toggleCheckbox(this)" />
The default value for the form input field is as follows
<input type="hidden" name="strAPISuccessURL" id="strAPISuccessURL" value="http://www.gladstonebrookes.co.uk/the-call/" />
When I click the checkbox the value of the input with id="strAPISuccessURL" changes as it should. The problem I am having is that I am then unable to 'uncheck' the box so that the URL reverts back to the original.
Thanks in advance for any suggestions

You're using a single = in your if. This is setting the value to true then returning true and not "checking" if it is true and returning that.
You most likely want to use ===
if (document.getElementById("checkbox").checked === true) {
// ...
}

You have used = instead of ==, you can also Try this,
if(element.checked) {
document.getElementById("strAPISuccessURL").value = "http://www.gladstonebrookes.co.uk/thank-you/";
}else{
document.getElementById("strAPISuccessURL").value = "http://www.gladstonebrookes.co.uk/the-call/";
}

jQuery check if checkbox is checked and update the value of the texbox with the checkbox's value and uncheck if it's empty

Here what I am trying to do is, if I check the checkbox the value of the respective checkbox should be appended to the textbox by using "," as delimiter between the values. And If the value of the checked respective checkbox is empty it should alert that email ID is invalid and uncheck that checkbox whose value is empty.
What's Working :
- If I check the checkbox the value is appending to the textbox.
- If I check the checkbox whose value is empty I'm getting alert.
- If I uncheck the values are automatically removed from the textbox.
What's Not working:
- Email ID validation isn't working. Function is written but it's not working. (No Errors in console)
- If I have selected few options by checking the boxes which has value and then if I select the checkbox whose value is empty I am not getting the invalid email ID alert.
Here is the code below.
HTML:
<label>Recipients : </label>
<input style="width:450px;" type="text" id="toaddress" name="toaddress"></input>
<br>
<div class="plist" style="padding:20px;">
<input type="checkbox" value="abcp#gmail.com">Pradeep</input><br>
<input type="checkbox" value="cd#gmail.com">Karthik</input><br>
<input type="checkbox" value="abcn#p.com">akfkl</input><br>
<input type="checkbox" value="ksake#po.com">afljs</input><br>
<input type="checkbox" value="">abc</input><br>
<input type="checkbox" value="">xyzop</input><br>
<input type="checkbox" value="abc#cto.com">jay</input><br>
<input type="checkbox" value="">raj</input><br>
</div>
JavaScript:
function updateTextArea() {
var allVals = [];
$('.plist :checked').each(function (i) {
if ($.trim($('.plist :checked').val()) === '' && validateEmail($('.plist :checked').val())) {
$(this)
alert("Email ID is invalid for the selected patient ! \n Example: abc#xyz.com");
} else {
allVals.push((i !== 0 ? "\r\n" : "") + $(this).val());
}
$('#toaddress').val(allVals).attr('rows', allVals.length);
});
}
$(function () {
$('.plist input').click(updateTextArea);
updateTextArea();
});
function validateEmail($email) {
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if (!emailReg.test($email)) {
return false;
} else {
return true;
}
}
Link to JSFiddle is here
http://jsfiddle.net/RhjjA/

Check http://jsfiddle.net/RhjjA/3/
I changed the validateEmail
Changed the checked when you loop through it to $(this).
I was thinking about checking if the value is empty or not valid, because neither of those conditions are allowed to pass the check. So added ! infron of the validateEmail.
I added an $(this).attr('checked', false);
This should help you get on your way.

if ($.trim($(this).val()) === '' && validateEmail($(this).val())) {
$(this).attr('checked',false);
alert("Email ID is invalid for the selected patient ! \n Example: abc#xyz.com");

Your code works fine except for one tiny detail, after your if condition, you have added $(this). This isn't terminated with a semi-colon, nor is it required. Comment this line and try.
http://jsfiddle.net/RhjjA/5/

I did that from your first question : jsfiddle.net/hBGD6/4/
The 2 main problems were
if ("string is empty" AND "validateEmail" ) couldn't work (so all string were ok). should be if ("string is empty" OR "NOT validateEmail" )
the param used by validateEmail() was the return of a function which is null (or something undefined) which was invalid for emailReg.test()

How to automatically uncheck checkbox if textbox is filled

I've made the checkbox to be default check. How can I uncheck the checkbox automatically if certain textfield is filled. I've thinking of using javascript.
I tried using this
<input type="text" name="commentID" id="commentID" onkeyup="userTyped('skipID', this)"/>
<input type="checkbox" name="skipID" value="N" id="skipID" checked="checked" />
and the javascript
function userTyped(commen, e){
if(e.value.length > 0){
document.getElementById(commen).checked=false;
}else{
document.getElementById(commen).checked=true;
}}​
It works but how if i have 3 textfield, and I want the checkbox to be filled only after all textfield is filled.

Just do this:
<input type="checkbox" id="someid" checked="checked"/>
<textarea onchange="if (this.value != '') document.getElementById('someid').checked = false;"></textarea>

if(document.getElementById('yourtextBox').value!=' ')
{
document.getElementById('checbox').checked=false;
}

Try the following code. In this code, each time when you type a character in the textfield, the function will be called and the length of the textfield value is not zero, the checbox will be unchecked and it will be checked while you clear your textfield
//Function get called when you type each letter
function OnChangeTextField(){
//getting the length of your textbox
var myLength = $("#myTextbox").val().length;
if(myLength > 0){
$("#myCheckbox").attr("checked", false);
}else{
$("#myCheckbox").attr("checked", true);
}
}
<input type = "text" id = "myTextbox" onkeyup= "OnChangeTextField();"/>
<input type="checkbox" id = "myCheckbox" value = "true" checked = "checked"/>

$("#comment").on("keyup blur", function () {
$("#box").prop("checked", this.value == "");
});
EDIT: You can also use jQuery

$("#comment").on("keyup blur", function() {
$("#box").prop("checked", this.value == "");
});
Try jQuery, This works for me...