Dropdowncheckboxes在javascript中选择值验证答案

【问题标题】：Dropdownchecboxes selected value validation in javascriptDropdowncheckboxes在javascript中选择值验证
【发布时间】：2016-08-05 12:13:24
【问题描述】：

我有一个DropDownCheckBoxes，我可以在其中检查列表中的多个项目。现在我想要的是，

对选择的多个项目的按钮单击验证必须来自同一个月，如果所选项目不是来自同一个月，那么它应该提示一条警报消息，以选择同一月份的项目.

例如：- 如果从列表中选择的第一个项目是 April，那么用户必须仅从 4 月开始选择下一个项目，如果选择了其他月份而不是它应该引发警报消息。

这是我DropDownCheckBoxes的截图

[![DropDownCheckBoxes][1]][1]

下面是我的代码，我首先尝试获取列表中的selected value，但出现错误

行：13 错误：“选项”为空或不是对象

查看我的代码的 js fiddle [HERE][2]

请提出问题以及如何验证 button click 上的用户。

【问题讨论】：

您正在使用自定义选择，其中显示了带有多个选项的div。这些不是来自select 标记的option 元素，导致错误“选项为空或不是对象”。
@Jorrex：那么应该做什么对此特别清楚？
首先，尝试格式化您的 HTML ;) 它更容易阅读和查看结构，而不是一个文本块。
@Jorrex：看到更新的小提琴，这是你想要的吗？
@Jorrex：发生了什么事？？你得到你想要的了吗？还是我需要进行更多格式化？

标签： javascript html asp.net

【解决方案1】：

所以我查看了您的代码。因为我不知道你想要用纯 Javascript 或 jQuery 来做，所以我冒昧地用 jQuery 来做（因为它更容易）。

我也不知道你的代码的真正目的，所以我基于你的例子和你给我们的信息。这可能会让您了解如何完成任务。

要么运行下面的 sn-p，要么看看这个fiddle。

/* Slide open menu and change arrow direction */
$("#caption").click(function() {
    $("#cmbEmp_Name_dv").slideToggle();
    $("#down, #up").toggle();
});

/* On change disable all checkboxes from different months */
$("input[type='checkbox']").change(function() {
    var amountChecked = $("input[type='checkbox']:checked").length;
    if (amountChecked === 1) {
        var month = getMonth($(this).next().html());
        $("input[type='checkbox']").each(function() {
            var myMonth = getMonth($(this).next().html());
            if (month !== myMonth) {
                $(this).prop("disabled", true);
                $(this).next().css("background-color", "gray");
            }
        });
    }

    if (amountChecked === 0)
        $("input[type='checkbox']").prop("disabled", false).next().css("background-color", "transparent");
});

/* Function to check if all checked options are from the same month */
$("#btnSubmit").click(function() {
    var firstSelected = $("input:checked").first().next().html();
    if (firstSelected !== undefined && firstSelected !== "undefined" && firstSelected && firstSelected != "") {
        var firstMonth = getMonth(firstSelected);
        var isNotEqual = false;

        $("input:checked").each(function() {
            var month = getMonth($(this).next().html());

            if (firstMonth !== month)
                isNotEqual = true;
        });

        if (isNotEqual)
            alert("Please check items from the month " + firstMonth);
        else
            alert("Validation complete - good to go!");
    }
	else
	{
		alert("Select an option first!");
		$("#cmbEmp_Name_dv").slideDown();
	}
});



/* Function to strip off all characters and return the month */
function getMonth(html) {
    var monthPart = html.split("(").length > 1 ? html.split("(")[1] : "-";
    return monthPart.substr(0, monthPart.indexOf("-")).trim();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmbEmp_Name_sl" class="dd_chk_select" style="display:inline-block;position:relative;width:55%;">
    <div id="caption">
	Select <span id="down">&darr;</span><span id="up" style="display: none;">&uarr;</span>
    </div>
    <div id="cmbEmp_Name_dv" class="dd_chk_drop" style="display:none;position:absolute;width:500px;">
        <div id="checks" style="height:45%;">
				<input id="cmbEmp_Name_0" type="checkbox" name="cmbEmp_Name$0" />
				<label for="cmbEmp_Name_0">--Select--</label><br />
				
				<input id="cmbEmp_Name_1" type="checkbox" name="cmbEmp_Name$1" />
				<label for="cmbEmp_Name_1">ANIL VITTHAL GAWADE-312(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_2" type="checkbox" name="cmbEmp_Name$2" />
				<label for="cmbEmp_Name_2">ANURADHA A. DESHMUKH-53(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_3" type="checkbox" name="cmbEmp_Name$3" />
				<label for="cmbEmp_Name_3">ASMA SIDDIQUI-83(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_4" type="checkbox" name="cmbEmp_Name$4" />
				<label for="cmbEmp_Name_4">DEEPTI MAITHIL-1250(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_5" type="checkbox" name="cmbEmp_Name$5" />
				<label for="cmbEmp_Name_5">GAURAV JHUNJHUNWALA-2222(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_6" type="checkbox" name="cmbEmp_Name$6" />
				<label for="cmbEmp_Name_6">HITESH PANCHAL-253(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_7" type="checkbox" name="cmbEmp_Name$7" />
				<label for="cmbEmp_Name_7">JAGDISH UBARE-362(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_8" type="checkbox" name="cmbEmp_Name$8" />
				<label for="cmbEmp_Name_8">JAIDEEP MAHAKAL-134(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_9" type="checkbox" name="cmbEmp_Name$9" />
				<label for="cmbEmp_Name_9">JASMINE RATHOD-228(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_10" type="checkbox" name="cmbEmp_Name$10" />
				<label for="cmbEmp_Name_10">JIGAR SHAH-358(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_11" type="checkbox" name="cmbEmp_Name$11" />
				<label for="cmbEmp_Name_11">Junaid Chaudhary-2487(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_12" type="checkbox" name="cmbEmp_Name$12" />
				<label for="cmbEmp_Name_12">KAMAL MATALIA-17(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_13" type="checkbox" name="cmbEmp_Name$13" />
				<label for="cmbEmp_Name_13">KETAN NALAWADE-2478(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_14" type="checkbox" name="cmbEmp_Name$14" />
				<label for="cmbEmp_Name_14">KRUPA DAVE-349(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_15" type="checkbox" name="cmbEmp_Name$15" />
				<label for="cmbEmp_Name_15">NEHA ARUN KHANNA-2145(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_16" type="checkbox" name="cmbEmp_Name$16" />
				<label for="cmbEmp_Name_16">NILESH GAIKWAD-903(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_17" type="checkbox" name="cmbEmp_Name$17" />
				<label for="cmbEmp_Name_17">PALLAVI KATHAL-2465(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_18" type="checkbox" name="cmbEmp_Name$18" />
				<label for="cmbEmp_Name_18">RAMESH  SANAP-1855(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_19" type="checkbox" name="cmbEmp_Name$19" />
				<label for="cmbEmp_Name_19">SAKINA VIVIAN DSILVA-2392(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_20" type="checkbox" name="cmbEmp_Name$20" />
				<label for="cmbEmp_Name_20">SAMANTHA SAXENA-2442(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_21" type="checkbox" name="cmbEmp_Name$21" />
				<label for="cmbEmp_Name_21">SANGEETA JIJI RANE-314(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_22" type="checkbox" name="cmbEmp_Name$22" />
				<label for="cmbEmp_Name_22">SARVESH SUBHASH CHAUDHARY-2462(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_23" type="checkbox" name="cmbEmp_Name$23" />
				<label for="cmbEmp_Name_23">SAYED SOHAIL JAVED AKHTAR-2014(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_24" type="checkbox" name="cmbEmp_Name$24" />
				<label for="cmbEmp_Name_24">SHALIBHADRA HAKANI-2158(April - 2016)</label><br />
				
				<input id="cmbEmp_Name_25" type="checkbox" name="cmbEmp_Name$25" />
				<label for="cmbEmp_Name_25">SONAL RAVINDRA AMBEDE-2533(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_26" type="checkbox" name="cmbEmp_Name$26" />
				<label for="cmbEmp_Name_26">SRINIVAS VENKANNA SAMUDRALA-2525(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_27" type="checkbox" name="cmbEmp_Name$27" />
				<label for="cmbEmp_Name_27">SUNIL DESAI-2484(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_28" type="checkbox" name="cmbEmp_Name$28" />
				<label for="cmbEmp_Name_28">UMANG DARJI-2239(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_29" type="checkbox" name="cmbEmp_Name$29" />
				<label for="cmbEmp_Name_29">UMESH VASHISTH-1900(March - 2016)</label><br />
				
				<input id="cmbEmp_Name_30" type="checkbox" name="cmbEmp_Name$30" />
				<label for="cmbEmp_Name_30">VISHAL SUBHASH PAWADE-1881(March - 2016)</label>
        </div>
    </div>
</div>
&nbsp&nbsp
<input type="submit" name="btnSubmit" value="Process" id="btnSubmit" />

通知
我确实实现了@Freak 他的建议，禁用了与用户首选不同的所有选项。

另一方面，我还在 Validate 按钮上实现了检查，因为它将检查用户是否可能检查了不同的月份。以防万一。

【讨论】：

我是，但请记住，这不是聊天。这些 cmets 旨在对手头的问题发表评论。
您应该首先包含 jQuery 脚本，否则此代码将不起作用。此外，将其包装在$(document).ready(function() { ... }); 中，以便在文档准备好时执行代码。并且复选框可能是动态绑定的，您必须确保您有一个 div 和 id="cmbEmp_Name_dv"，因为代码将搜索该元素。如果你决定删除箭头，你应该删除那一行代码：$("#down, #up").toggle(); 这应该可以解决问题。最重要的是包含 jQuery 并将其包装在 $(document).ready(function() { ... });
如果这是您要寻找的答案，请将其标记为“答案”，以便其他人也可以从中学习。
让我们continue this discussion in chat。