Question

我有3个具有相同名称但ID不同且值分别为OK，TX和NY的复选框。还有包装器div，其中包含几个input。如果用户选择OK或TX，那么我想显示div；如果用户选择NY，则我想隐藏div

if（OK || TX）然后显示
if（OK && NY）然后显示
if（TX && NY）然后显示
if（OK && TX && NY）然后显示
if（NY）然后隐藏

<div class="m-3 w-checkbox-group">
    <label class="font-weight-bold">Select states?</label>
    <div class="form-check">
        <input class="form-check-input" id="states0" name="states" type="checkbox" value="OK">
        <label class="form-check-label" for="states0">Oklahoma</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" id="states1" name="states" type="checkbox" value="TX">
        <label class="form-check-label" for="states1">Texas</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" id="states2" name="states" type="checkbox" value="NY">
        <label class="form-check-label" for="states2">New York</label>
    </div>
    <span class="text-danger field-validation-valid d-block" data-valmsg-for="states" data-valmsg-replace="true"></span>
</div>

<div class="w-conditional d-none">
    <div>
        <div class="m-3 form-group">
            <label class="font-weight-bold" for="firstName">First Name</label>
            <input class="form-control" data-clean="lowerCase" id="firstName" name="firstName" type="text">
            <span class="text-danger field-validation-valid d-block" data-valmsg-for="firstName" data-valmsg-replace="true"></span>
        </div>
        <div class="m-3 form-group">
            <label class="font-weight-bold" for="lastName">Last Name</label>
            <input class="form-control" data-clean="lowerCase" id="lastName" name="lastName" type="text">
            <span class="text-danger field-validation-valid d-block" data-valmsg-for="lastName" data-valmsg-replace="true"></span>
        </div>
    </div>
</div>

javascript

$(function () {    

$("div.w-conditional").each(function (i, v) {      

            var name = "states";
            var expectedval = ["OK","TX"];
            var $div = $(this);

            $("input[name='" + name + "']").change(function () {                        
                    var cb = $(this);
                if (jQuery.inArray(cb.val(), expectedval) !== -1) {
                    $div.removeClass("d-none");
                }
                else {
                    $div.addClass("d-none");
                    $div.find("input").val('');
                }
            });

    });

});

这里的问题是从选中的复选框获取多个值。上面的cb变量将始终返回单个值。 $("input[name='states']").val()还会返回单个值。

我想获取所有选定值，并检查ExpectedValue中是否存在任何选定值

Answer 1

您可以遍历所有选中的复选框，并可以按如下所示在数组中推送值：

$("input:checkbox[name=states]:checked").each(function(){
    cbArray.push($(this).val());
});

然后您可以在代码中使用此数组。

如何从具有相同名称的复选框中获取所有选定的值

1 个答案: