复选框值始终为假 (JQUERY)

Question

我是 jquery 和 sharepoint 的新手。我面临一个问题。我有一个通过 JSON 将数据从服务器加载到客户端的应用程序。在客户端对表单进行一些处理后，将数据解析到后端服务器。每当我选中复选框时，我总是得到值 0。这是我正在使用的代码。

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

完整功能如下

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

}

下面是 html 代码。

<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

您无法通过这种方式访问选中的属性。有两种方法可以访问选中的属性

要么使用

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

或使用

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

Answer 2

你可以试试下面

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

Answer 3

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

或

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

或

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

或

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

Answer 4

好吧，我问了一个问题。但是这里没有人回答这个问题。这才是真正的错误。

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

});

我发现 class value-boolean 在同一代码中出现了两次。并且由于这个原因更改函数调用两次。因此价值改变。

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

这就是问题所在。感谢所有回答这个问题的人。特别是谁 -1 这个。 :)

复选框值始终为假 (JQUERY)

Checkbox value always get false (JQUERY)

checkbox

asp.net-mvc

jquery

json

sharepoint-2013