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

jQuery - radio button on click and not on change

I'm trying to find a solution to an issue I have between click and change.
I need to capture the click event and not change.
I'll explain the situation:
I have a radio button list with 3 items.
Each click I need to clean a div. However, If i'm posting back and return to the client with an error(submit, server validation check failed), the change event is fired once again (obviously), and the div is cleaned.
Is there a way to distinguish between click and the checked state?
I hope I have made myself clear.
Edit:
Added some code:
$("input[name*='SelectedOwner']").on('change',
function () {
var radioId = $(this).val();
if (radioId === "2" || radioId === "3") {
$("#div1").hide();
$("#divclean :input").removeAttr("disabled");
} else {
$("#div1").show();
$("#divclean :input").attr("disabled", true);
}
});
$("input[name*='SelectedOwner']").on('click', function () {
//Clean the output at each change
$("#divclean :input").val("");
});
Thanks.

$('input[name="choose"]').click(function(e) {
if ($(this).data('clicked')) {
$('#theDiv').text('You have REclicked "'+ $(this).val() + '" value');
}
else {
$('input[name="choose"]').data('clicked', false);
$(this).data('clicked', true);
$('#theDiv').text('First time you click "'+ $(this).val() + '" value');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="theDiv"></div>
A
<input type="radio" name="choose" value="a" />
B
<input type="radio" name="choose" value="b" />
C
<input type="radio" name="choose" value="c" />

You should to bind the change event to every radio button:
$("#r1, #r2, #r3").change(function () { }
With jQuery is also possible:
if ($("#r1").is(":checked")) {}
More informations:
JQuery $(#radioButton).change(...) not firing during de-selection
I hope this helps...
Good Luck!

How use ClearText textarea When i am click radiobutton

1.Step(Unicode RadioButton is Checked) TextetArea notClear when Unidcode Radio is Checked But Zawgyi Radio is checked Textarea is Clear.
2.Step(Zawgyi RadioButton is Checked)TextetArea notClear when Zawgyi Radio is Checked But Unicode Radio is checked Textarea is Clear.
<label><input type="radio" name="kb" value="uni" id="unikb"/>Unicode</label>
<label><input type="radio" name="kb" value="zawgyi" id="zawgyikb"/>Zawgyi</label>
<textarea id="desp" class="form-control rows="5"></textarea>
How use Jquery
$("input").click(function(){
if ( $(this).val()=='uni' || $(this).val()=='zawgyi'){
$("textarea#desp").val();
}
else{
$("textarea#desp").val('');
}
}) ;
i wanted this style
textarea is not clear.
textarea is clear
AND
textarea is not clear.
textarea is clear
SEEDEMO

You had the else clausure wrong, jsfiddle fixed: http://jsfiddle.net/hLuk2bhx/9/
Now it's working... (:
$("input[type='radio']").click(function(e) {
if ( $(this).val()=='uni'){
$("textarea").val('');
}else{
$("textarea").val('');
}
});
After your comment i've updated your code making it more dynamic, i've create a var to control the last statement.
var lastChecked = undefined;
$("input[type='radio']").click(function(e) {
if ( $(this).val() != lastChecked && (typeof lastChecked !== 'undefined')){
$("textarea#desp").val('');
}
lastChecked = $(this).val();
});
Hope that it helps your problem.
Fiddle: http://jsfiddle.net/hLuk2bhx/23/

I have updated your code , plz see this JSFiddle
http://jsfiddle.net/hLuk2bhx/22/
Code changed
$("textarea#desp").val(); -> $("#desp").val(''); //You have to assign an "" empty string as its value to clear the textarea content
esle -> else
Added html as below
<input type="hidden" id="previouschecked" name="previouschecked" value="" / >
And I have added an input[hidden] to storethe previous value, So it should looks like
$("input[type='radio']").click(function(e) {
if ( $(this).val() !=$("#previouschecked").val()){
$("#desp").val('');
}
$("#previouschecked").val($(this).val());
});
Since you have an ID on your textarea so you can use $("#desp") directly
"esle" is a typo so your code is broken that won't run correctly

Prevent checking a checkbox after onclick

How can I prevent that a checkbox gets checked (without the use of disable)?
I tried
function nocheck() {
if(somevar.value>3){
alert("Not allowed");
document.getElementById('mybox').checked = false;
}
};
with
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="nocheck();" />
But this way the checkbox still gets checked after the alert message pops up.
EDIT:
Thanks to the comments/answers, I was able to come closer to a solution but not yet solved the problem - what's wrong with this code? http://jsfiddle.net/9kS8E/1/
HTML
<div class="ez-checkbox">
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="nocheck();" class="ez-hide">
</div>
JS
var user = { premium : false };
function nocheck() {
if(!user.premium){
return false;
} else {
return true;
};
};

i think i not understand your question but i think you are searching this,
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="return false;" />
OR
html
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="nocheck()" />
js
function nocheck() {
if(somevar.value>3){
alert("Not allowed");
return false;
}else
return true;
};

(1) save value of check box in a variable [ while "click" value of checkbox will get changed ]
(2) check user type,
if not a premium user, toggle value of check box.
else no need to change value of checkbox
(*) by using toggle : checkbox is already checked or not, we are not allowing a normal user to check it.
Fiddle : http://jsfiddle.net/aslancods/rQG3r/
<input type="checkbox" name="mybox" id="mybox" value="test" onclick="noCheck(event)" />
var user = { premium : true };
function nocheck(elem) {
var newValue = elem.checked;
if(!user.premium) {
alert("not allowed");
elem.checked = !newValue;// toggle value
} else {
alert(" allowed ");
}
};

Your code should also work.
It's getting unchecked after alert.
You can say alert after unchecking like this.
if(somevar.value>3){
document.getElementById('mybox').checked = false;
alert("Not allowed");
}

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