Help setting field value from checkbox value using jQuery

[Dale DeMott]

So with my code I'm looking to take a value out of a checkbox and put it into a text field. The code is in JSFIDDLE. See the link below. I use the latest JQuery as well.

http://jsfiddle.net/ddemott/MUU3z/

The problem I'm having is I can't seem to get the checkbox value go into the input field. It pops up in the alert but won't go into the field. I'm obviously missing something. Here's the code snippet.

    //IF THERE IS ONLY 1 ROOM PICKED THEN GET THAT VALUE CHECKBOX VALUE AND PUT IT INTO THE INPUT BOX BELOW.
    if ($('.singleRoom:checked').size() == 1) {
        var x = $('.singleRoom:checked').val();
        alert(x);
        $('#returnValue').val(x);
    }

Here's the code. As you can see I look to see how many checkboxes were checked. If there was only ONE checkbox checked then I popup up the value in an alert. But when I try to put x into the field of 'returnValue' it doesn't change the input field. If you go to jsfiddle you'll see this code execute when you click a single room.

Below is all of the code (without the script tags)

var roomArray = new Array();
roomArray[0] = "";
roomArray[1] = "A,B,C,D";
roomArray[2] = "C,D";
roomArray[3] = "B,C";
roomArray[4] = "A,B";

var roomKeys = new Array();
roomKeys[0] = "";
roomKeys[1] = "ABCD";
roomKeys[2] = "CD";
roomKeys[3] = "BC";
roomKeys[4] = "AB";

var appendedCheckBoxValues = "";

// DROPDOWN CHANGES, EXECUTE THIS
$('#aggRoom').change(function() {
    //SPLIT UP THE ROOMS
    rooms = ($('#aggRoom').val()).split(",");
    //UNCHECK ALL THE CHECKBOXES FIRST SO WE DON'T ACCUMULATE CHECKS
    $('input:checkbox').removeAttr('checked');

    //CHECK ALL THE CHECKBOXES THAT ARE IN THE ROOMS[] ARRAY
    for (i = 0; i < rooms.length; i++) {
        $('input:checkbox[value=' + rooms[i] + ']').prop('checked', 'checked');
    }
});

//BIND CLICK TO EVERYTHING THAT HAS A CLASS OF singleroom

$('.singleRoom').click(

function() {
    appendedCheckBoxValues = "";
    $('input:checkbox').each(function() {
        if ($(this).attr('checked')) {
            appendedCheckBoxValues = appendedCheckBoxValues + $(this).attr('value') + ",";
        }
    });
    appendedCheckBoxValues = appendedCheckBoxValues.substring(0, appendedCheckBoxValues.length - 1);

    var foundMatch;
    foundMatch = false;
    for (j = 0; j < roomArray.length; j++) {
        if (roomArray[j] == appendedCheckBoxValues) {
            foundMatch = true;
            $("#aggRoom").val(appendedCheckBoxValues);
            break;
        }
    }
    if (foundMatch === false) {
        $("#aggRoom").val("");
    }

    //IF THERE IS ONLY 1 ROOM PICKED THEN GET THAT VALUE CHECKBOX VALUE AND PUT IT INTO THE INPUT BOX BELOW.
    if ($('.singleRoom:checked').size() == 1) {
        var x = $('.singleRoom:checked').val();
        alert(x);
        $('#returnValue').val(x);
    }

    if (foundMatch === false && $('.singleRoom:checked').size() > 1) {
        $('#returnValue').val("NO VALUE MATCHING");
    } else {
        $('#returnValue').val(roomKeys[j]);
    }

});

and the HTML

<select id="aggRoom">
<option value=""/></OPTION>
<option value="A,B,C,D">Agg Room A,B,C,D</OPTION>
<option value="C,D"/>Agg Room C,D</OPTION>
<option value="B,C"/>Agg Room B,C</OPTION>
<option value="A,B"/>Agg Room A,B</OPTION>
<option value="B,C,D"/>Agg Room B,C,D</OPTION>
</select>
<br><br>
<input class="singleRoom" type="checkbox" value="A">Room A</br>
<input class="singleRoom" type="checkbox" value="B">Room B</br>
<input class="singleRoom" type="checkbox" value="C">Room C</br>
<input class="singleRoom" type="checkbox" value="D">Room D</br>

</br>
</br>
</br>
<input id="returnValue" class="returnValue" type="text" value="">

[Eric Pascarello]

Your code is setting the value correctly, you just have too much logic going in multiple places that resets the value. [also use console.log() to debug and not alerts]

Eric

[Bear Bibeault]

I agree with Eric -- the code is not logically organized and is stepping all over itself. I'd actually advise deleting the whole thing, taking a deep breath, figure out what you're actually trying to accomplish, and try again.

[Dale DeMott]

Once I cleaned it up and got my head around the logic it fell together much nicer. All is working now.

See code in JSFiddle.

http://jsfiddle.net/ddemott/5k396/38/