We Keep Coding

How can i change the value of checkbox upon change

I would like to change the value of the checkbox, but failed with the following code.
$("input:checkbox").on("change", function () {
if (this.checked == true) {
this.val("1");
}
else {
this.val("0");
}
});
I not sure why it is no responds without the code, which it should've the "checked" when I'm calling this element, but no. So i will need to add a value field manually.
<input class="c-switch-input" type="checkbox" name="pk_{{$d['id']}}" value="{{$d['status']}}">

You are mixing jQuery and DOM incorrectly
EITHER
this.value = "1";
OR
$(this).val("1")
But use a ternary:
$("input:checkbox").on("change", function () {
this.value = this.checked ? "1" : "0";
console.log(this.value)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" />

How to enable button when checbox is checked

I have codes like this
<div class="checkbox">
<input type="checkbox" id="checkme" value ="accept"/>
<label>I have read and agree to the terms and conditions</label>
<p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
I was trying to put this Jscript below of codes:
<script>
$(document).ready(function() {
var the_terms = $("#checkme");
the_terms.click(function() {
if ($(this).is(":checked")) {
$("#sub1").removeAttr("disabled");
} else {
$("#sub1").attr("disabled", "disabled");
}
});
});
</script>
However it does not work at all. I already follow all guides on internet. Anyone can help what part i did wrong? Is there any additional codes beside these?'
Oh and this on php format
EDIT:
Done this too
<script>
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sub1');
checker.onchange = function() {
sendbtn.disabled = !!this.checked;
};
</script>
But how do i change to disable when unchecked?

Simply use jquery change event like this :
$(document).ready(function() {
$('#checkme').change(function() {
if ($(this).is(":checked")) {
$("#sub1").removeAttr("disabled");
} else {
$("#sub1").attr("disabled", "disabled");
}
});
});

$(function() {
$('#id_of_your_checkbox').click(function() {
if ($(this).is(':checked')) {
$('#id_of_your_button').attr('disabled', 'disabled');
} else {
$('#id_of_your_button').removeAttr('disabled');
}
});
});

Change Text input value on checkbox select

I am trying to input the value of a checkbox into a text input.
Let's say that the input box is empty - you click on the checkbox, and the value assigned to the checbkox is being shown inside the input box.
$('input.lowercase').on('change', function(){
if ( $(this).is(':checked') ) {
$("input.qwer").on("keyup",function () {
$("input.qwer").html($(this).val());
}); } } );
No matter what I do I can't get this to work. Any help?
http://jsfiddle.net/6ycnzrty/

[EDITED] (As per your needs)
Demo on Fiddle
HTML:
<input type="text" class="output" value="" />
<br>
<input type="checkbox" class="qwer" value="qwerty">Input value of this checkbox(qwert)
<br>
<input type="checkbox" class="numbers" value="1234567890">Input value of this checkbox(numbers)
<br>
<input type="checkbox" class="asdfg" value="asdfg">Input value of this checkbox(asdfg)
<br>
<input type="checkbox" class="zxcvb" value="zxcvb">Input value of this checkbox(zxcvb)
JavaScript:
$('input.qwer').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.qwer').val(), ''));
}
});
$('input.numbers').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.numbers').val(), ''));
}
});
$('input.asdfg').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.asdfg').val(), ''));
}
});
$('input.zxcvb').on('change', function () {
if ($(this).is(':checked')) {
$('.output').val($('.output').val() + $(this).val());
} else {
$('.output').val($('.output').val().replace($('.zxcvb').val(), ''));
}
});

Try This :-
$('input.qwer').on('change', function(){
if ( $(this).is(':checked') ) {
$("input.output").val($(this).val());
}
else{ $("input.output").val("123"); }
});
With above code if checkbox is unchecked then textbox having class 'output' will get its initial view i.e '123',if you don't need this functionality then try this :
$('input.qwer').on('change', function(){
if ( $(this).is(':checked') ) {
$("input.output").val($(this).val());
}
});
EDIT :-
DEMO

Try
var $chk = $('input.qwer').on('change', function () {
//if the checkbox is checked and output is empty set the value
if (this.checked && !$output.val()) {
$output.val(this.value)
}
});
var $output = $("input.output").on("change", function () {
//when the value of output is changed as empty and checkbox is checked then set the value to checkbox
if (!this.value && $chk.is(':checked')) {
this.value = $chk.val();
}
});
Demo: Fiddle

$("input.qwer").on("change",function () {
if($(this).is(":checked"))
$("input.output").val($(this).val());
else
$("input.output").val("123");
});
DEMO

I got a annoying bug in storing input value using localStorage

I want to do is to store the current inputs even if the user refresh or close the browser.
My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.
testing link: http://jsfiddle.net/5kcsn/124/
current script:
$(document).ready(function () {
$('#employed_v1, #employed_v0, #test').on("change", function () {
debugger;
localStorage.setItem($(this).attr("id"), $(this).val())
});
$('#employed_v1, #employed_v0, #test').each(function (ind, val) {
debugger;
if ($(val).attr("id") != "employed_v1") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
if ($(val).attr("id") != "employed_v0") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
else {
if (localStorage.getItem($(val).attr("id")) == "Yes"){
$("#employed_v1[value=Yes]").prop("checked", true);}
if (localStorage.getItem($(val).attr("id")) == "No"){
$("#employed_v0[value=No]").prop("checked", true);}
}
});
$('[id="employed_v0"]').on('click', function(){
$('#test').val('');
$('#test').prop('disabled', true);
});
$('[id="employed_v1"]').on('click', function(){
$('#test').prop('disabled', false);
});
});

To store the check state you should use the checked attribute.
However, here is a modified version :
$(document).ready(function () {
$('#employed_v1, #employed_v0').on("change", function () {
localStorage.setItem('employed', $(this).attr("id"))
});
$('#' + localStorage.getItem('employed')).attr('checked', true);
});

There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:
Html:
<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.js-store').on("change", function () {
if ($(this).is(":radio")) {
localStorage.setItem($(this).attr("name"), $(this).val());
}
else {
localStorage.setItem($(this).attr("id"), $(this).val());
}
});
$(".js-store").each(function() {
if ($(this).is(":radio")) {
var value = localStorage.getItem($(this).attr("name"));
if (value) { $(this).prop("checked", value === $(this).val()); };
}
else {
var value = localStorage.getItem($(this).attr("id"));
if (value) {$(this).val(value);}
}
});
});
</script>

check box enable in Jquery

<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />
The javascript:
$(document).ready(function() {
function toggletr(obj)
{
if(obj.checked)
$(#tr99).hide();
else
$(#tr99).show();
}
hi.this is my code that runs in add page of staff.
if user is in edit mode the value that value is checked in the code
i mean to say in .cs .
checkbox.checked ="true" means . that time i need to make that tr value "tr99" is visiable true
if checkbox is not checked then make the tr as hide.

Take the toggletr method out of the "$(document).ready(function() {"
<script type="text/javascript">
function toggletr(obj){
if(obj.checked)
$('#tr99').hide();
else
$('#tr99').show();}
</script>
<tr id="tr99"><td>......</td></tr>
<input type="checkbox" onclick="toggletr(this);" value="val" id="cbox" />

I think that you want this to happen
$(document).ready(function() {
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}
});
Is that it? You can also add the function directly
function toggletr(obj){
if(obj.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
}

If I were you I'd set the onclick method to be an event handler:
$(function(){
$('#cbox').click(function(){
if(this.checked){
$("#tr99").show();
$("#cbox").attr("value", "tr99");
}else {
$("#tr99").hide();
}
});
});

If you wanted to do pure jQuery and not mix in normal Javascript (obj.checked)....
$(function(){
$("#cbox").click(function(){
if($(this).is(":checked")){
$("#tr99").show();
}else{
$("#tr99").hide();
}
});
});