Checkbox value always get false (JQUERY)

Question

I am newbie in jquery and sharepoint. I am facing a problem. I have an application that load the data from server to client through JSON. And after doing some work on form in client parse the data to back server. Whenever i checked the checkbox i always gets value 0. Here is the code that I am using.

$(this).closest(".filter").find(".value").val(this.checked ? 1 : 0);

And complete function is following

function initializeFilters(){
var filterContainer = $(".filter-box-data");
var hiddenFilter = filterContainer.find(".filter-hidden");
hiddenFilter.find(".operator-container,.value-container,.logic-operator-container").hide();
var columnDropDown = hiddenFilter.find("select.columns");
bindDropDown(columnDropDown, listFieldDisplayNames);
columnDropDown.change(onFilterColumnDropDownChanged);
hiddenFilter.find(".operator-container select").change(onFilterOperatorDropDownChanged);
hiddenFilter.find(".value-boolean").change(function(){
    $(this).closest(".filter").find(".value").val(this.checked ? 1 : 0);
    debugger;
});

addFilterRow();
$(".add-filter-link").click(addFilterRow);
$("[id$='filter-remove']").click(
    function(e){
        removeFilterRow($(this),e);
    }
);
buildFilterControls(selectedFiltersData);

}

And the html code is following.

<div class="filter-box row-container">
        <div class="label-container column-container">
            Filter:
        </div>
        <div class="filter-box-data">
            <div class="filter filter-hidden control-container column-container">
                <div>
                    <div class="column-container">
                        <select class="columns filtersDropDown" name="FieldName">

                        <option value="-1">(None)</option><option value="Title">Title</option><option value="Description">Description</option><option value="IsEnabled">IsEnabled</option><option value="ViewCount">ViewCount</option><option value="RoutingRuleDescription">Description1223</option><option value="ContentTypeId">Content Type ID</option><option value="StartDate">Start Date</option><option value="EndDate">End Date</option><option value="PersonOrGroup">PersonOrGroup</option><option value="Lookup">Lookup</option><option value="Note">Note</option><option value="Choice">Choice</option><option value="ID">ID</option><option value="ContentType">Content Type</option><option value="Modified">Modified</option><option value="Created">Created</option><option value="Author">Created By</option><option value="Editor">Modified By</option><option value="Attachments">Attachments</option><option value="LinkTitle2">Title</option><option value="FileRef">URL Path</option><option value="FileDirRef">Path</option><option value="Last_x0020_Modified">Modified</option><option value="Created_x0020_Date">Created</option><option value="FileLeafRef">Name</option><option value="UniqueId">Unique Id</option><option value="DocIcon">Type</option><option value="ServerUrl">Server Relative URL</option><option value="EncodedAbsUrl">Encoded Absolute URL</option><option value="ItemChildCount">Item Child Count</option><option value="FolderChildCount">Folder Child Count</option></select>
                    </div>
                    <div class="operator-container" style="display: none;">
                        <select class="operator" name="Operator">
                        </select>
                    </div>
                    <div class="value-container" style="display: none;">
                        <div class="value-boolean">
                            <input type="checkbox" class="value-boolean" style="display: none;">
                            Yes / No
                        </div>
                        <input class="value" type="text" name="value">
                    </div>
                    <div class="logic-operator-container" style="display: none;">
                        Or:<input type="radio" value="Or" name="filter-con" checked="checked"><br>
                        And:<input type="radio" value="And" name="filter-con">
                    </div>

                    <img id="filter-remove" src="/Style%20Library/Images/cross-circle.png" alt="X" style="cursor: auto;" class="mCS_img_loaded">

                </div>
            </div>
        <div class="filter control-container column-container">
                <div>
                    <div class="column-container">
                        <select class="columns filtersDropDown" name="FieldName">

                        <option value="-1">(None)</option><option value="Title">Title</option><option value="Description">Description</option><option value="IsEnabled">IsEnabled</option><option value="ViewCount">ViewCount</option><option value="RoutingRuleDescription">Description1223</option><option value="ContentTypeId">Content Type ID</option><option value="StartDate">Start Date</option><option value="EndDate">End Date</option><option value="PersonOrGroup">PersonOrGroup</option><option value="Lookup">Lookup</option><option value="Note">Note</option><option value="Choice">Choice</option><option value="ID">ID</option><option value="ContentType">Content Type</option><option value="Modified">Modified</option><option value="Created">Created</option><option value="Author">Created By</option><option value="Editor">Modified By</option><option value="Attachments">Attachments</option><option value="LinkTitle2">Title</option><option value="FileRef">URL Path</option><option value="FileDirRef">Path</option><option value="Last_x0020_Modified">Modified</option><option value="Created_x0020_Date">Created</option><option value="FileLeafRef">Name</option><option value="UniqueId">Unique Id</option><option value="DocIcon">Type</option><option value="ServerUrl">Server Relative URL</option><option value="EncodedAbsUrl">Encoded Absolute URL</option><option value="ItemChildCount">Item Child Count</option><option value="FolderChildCount">Folder Child Count</option></select>
                    </div>
                    <div class="operator-container" style="display: block;">
                        <select class="operator" name="Operator">
                        <option value="-1">(None)</option><option value="Eq">Equal to</option><option value="Neq">Not equal to</option><option value="Gt">Greater than or equal to</option><option value="Gte">Greater than or equal to</option><option value="Lt">Less than</option><option value="Lte">Less than or equal to</option><option value="IsNull">Is Null</option><option value="IsNotNull">Is not null</option></select>
                    </div>
                    <div class="value-container" style="display: block;">
                        <div class="value-boolean">
                            <input type="checkbox" class="value-boolean" style="">
                            Yes / No
                        </div>
                        <input class="value" type="text" name="value">
                    </div>
                    <div class="logic-operator-container" style="display: block;">
                        Or:<input type="radio" value="Or" name="Operator2" checked="checked"><br>
                        And:<input type="radio" value="And" name="Operator2">
                    </div>

                    <img id="filter-remove" src="/Style%20Library/Images/cross-circle.png" alt="X" style="cursor: auto;" class="mCS_img_loaded">

                </div>
            </div></div>
        <a id="lnkShowMoreColumns" href="javascript:;" class="add-filter-link">Add new filter...</a>
        <br>
    </div>

Answer 1

Well I asked a question. But no one here answer the question. Here is what actually wrong.

hiddenFilter.find(".value-boolean").change(function(){
$(this).closest(".filter").find(".value").val(this.checked ? 1 : 0);
debugger;

});

I was finding by class value-boolean that was twice in the same code. And due to this reason change function call twice. Therefore value change.

<div class="value-boolean">
   <input type="checkbox" class="value-boolean" style="display: none;">
                        Yes / No
   </div>
   <input class="value" type="text" name="value">
</div>

That was the problem. Thank you for all of you who answer this question. And especially who -1 this. :)

Answer 2

 $("input[type='checkbox']").val();

or

$('#check_id').val();

or

if ($('#check_id').is(":checked"))
{
  // it is checked
}

or

$("#check_id").attr('checked', true);

Answer 3

You can try below

$(this).closest(".filter").find(".value").val($(this).is(":checked")==true?1:0)

Answer 4

You can not access checked property this way. There are two ways to access checked attribute

Either use

$(this).closest(".filter").find(".value:checked").length

Or use

$(this).closest(".filter").find(".value").attr("checked")