'Checkboxes to replace value

Need some help. New to JS and HTML. I'm trying to get a checkbox to change any result from null to A.

A, null, A, A or any other combination should be the result

The result keeps showing only null, null, null, null and in html instead of the result box

https://jsfiddle.net/uw21myj8/

var k1 = 'null';
var k2 = 'null';
var k3 = 'null';
var k4 = 'null';

$(function(){
    $('#checkbox').change(function() {
      $("#text").val($(this).is(':checked') ? "A" : "B");
      k1 = 'C5';
    });
});

$(function(){
    $('#checkbox1').change(function() {
      $("#text1").val($(this).is(':checked') ? "A" : "B");
      k2 = 'C5';
    });
});
$(function(){
    $('#checkbox2').change(function() {
      $("#text2").val($(this).is(':checked') ? "A" : "B");
      k3 = 'C5';      
    });
});
$(function(){
    $('#checkbox3').change(function() {
        $("#text3").val($(this).is(':checked') ? "A" : "B");
        k4 = 'C5';     
    });
});


var results = (k1 + ', ' + k2 + ', ' + k3 + ', ' + k4 + ', ');

function getresults(){
       $("#result").text(results);
  console.log(results);
     };



Solution 1:[1]

Your JS needs some adjustments:

var k1 = 'null';
var k2 = 'null';
var k3 = 'null';
var k4 = 'null';

$(function(){
    $('#checkbox').change(function() {
      $("#text").val($(this).is(':checked') ? "A" : "B");
      k1 = $(this).is(':checked') ? "A" : "null";
    });
});

$(function(){
    $('#checkbox1').change(function() {
      $("#text1").val($(this).is(':checked') ? "A" : "B");
      k2 = $(this).is(':checked') ? "A" : "null";
    });
});
$(function(){
    $('#checkbox2').change(function() {
      $("#text2").val($(this).is(':checked') ? "A" : "B");
      k3 = $(this).is(':checked') ? "A" : "null";      
    });
});
$(function(){
    $('#checkbox3').change(function() {
        $("#text3").val($(this).is(':checked') ? "A" : "B");
        k4 = $(this).is(':checked') ? "A" : "null";     
    });
});


function getresults() {
  var results = (k1 + ', ' + k2 + ', ' + k3 + ', ' + k4 + ', ');
  $("#result").text(results);
  console.log(results);
};

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmet Zambak