Dropdownchecboxes在javascript中选定值的验证 [英] Dropdownchecboxes selected value validation in javascript

查看:143
本文介绍了Dropdownchecboxes在javascript中选定值的验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个 DropDownCheckBoxes 我在哪里可以检查从列表中选择多个项目。现在我想的是,

按钮点击选择多个项目的确认必须是从同月如果所选的项目从同一个月都没有,那么就应该及时警报消息选择的项目作为同一个月

有关前: - 如果从列表中第一个选择项为则用户只从四月选择下一个项目,如果比它应该选择一个月抛出一个警告消息。

下面是截图我的 DropDownCheckBoxes

[![ DropDownCheckBoxes ] [1] [1]

下面是我的code这是我第一次尝试获取选定值名单,但有一个错误


  

行:13
  错误:'选项'为空或不是对象


查看JS拨弄我的code [这里] [2]

好心建议什么是错的,如何的验证按钮点击用户为相同的。


解决方案

于是我看了一下您的code。因为我不知道它,你在普通的JavaScript或jQuery的希望,我参加了jQuery的做(因为它更容易)。

的自由

此外,我不知道你的code的真正目的,所以我根据它在你的榜样,你的信息给我们。这可能给你如何完成你的任务的想法。

无论是运行下面的代码片段或者看看这个小提琴

\r
\r

/ *滑动打开菜单,并改变沿箭头方向* /\r
$(#标题)。点击(函数(){\r
    $(#cmbEmp_Name_dv)的slideToggle();\r
    $(#下来,底本)切换();\r
});\r
\r
/ *在变化从不同月份禁用所有复选框* /\r
$(输入[类型=复选框])。改变(函数(){\r
    VAR amountChecked = $(输入[类型=复选框]:勾选)的长度;\r
    如果(amountChecked === 1){\r
        VAR月=的getMonth($(本)。接下来()HTML());\r
        $(输入[类型=复选框])。每个(函数(){\r
            VAR myMonth =的getMonth($(本)。接下来()HTML());\r
            如果(一个月!== myMonth){\r
                $(本).prop(已禁用,真正的);\r
                $(本)。接下来()的CSS(背景色,灰色);\r
            }\r
        });\r
    }\r
\r
    如果(amountChecked === 0)\r
        $(输入[类型=复选框])丙(已禁用,假)。接下来()的CSS(背景色,透明)。;\r
});\r
\r
/ *功能检查,如果所有选中的选项同月* /\r
$(#btnSubmit按钮)。点击(函数(){\r
    。VAR firstSelected = $(输入:勾选)第一()next()的HTML();\r
    如果(firstSelected ==不确定和放大器;!&安培;!firstSelected ==未定义&放大器;&安培; firstSelected和放大器;&安培;!firstSelected =){\r
        VAR firstMonth =得到月(firstSelected);\r
        VAR isNotEqual = FALSE;\r
\r
        $(输入:勾选)。每个(函数(){\r
            VAR月=的getMonth($(本)。接下来()HTML());\r
\r
            如果(firstMonth!==月)\r
                isNotEqual = TRUE;\r
        });\r
\r
        如果(isNotEqual)\r
            警报(请检查从本月项目+ firstMonth);\r
        其他\r
            警报(验证完成 - 好走!);\r
    }\r
其他\r
{\r
警报(第一选择一个选项!);\r
$(#cmbEmp_Name_dv)了slideDown();\r
}\r
});\r
\r
\r
\r
/ *功能去掉所有的字符,并返回月份* /\r
功能得到月(HTML){\r
    变种monthPart = html.split(()长度大于1 html.split(()[1]:? - ;\r
    返回monthPart.substr(0,monthPart.indexOf( - ))修剪();\r
}

\r

&LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
&LT; D​​IV ID =cmbEmp_Name_sl级=dd_chk_select的风格=显示:inline-block的;位置:相对;宽度:55%;&GT;\r
    &LT; D​​IV ID =标题&GT;\r
选择&LT;跨度ID =下降&GT;&安培; darr;&LT; / SPAN&GT;&LT;跨度ID =向上的风格=显示:无;&GT;&安培; uarr;&LT; / SPAN&GT;\r
    &LT; / DIV&GT;\r
    &LT; D​​IV ID =cmbEmp_Name_dv级=dd_chk_drop的风格=显示:无;位置:绝对的;宽度:500像素;&GT;\r
        &LT; D​​IV ID =检查的风格=高度:45%;&GT;\r
&LT;输入ID =cmbEmp_Name_0类型=复选框NAME =cmbEmp_Name $ 0/&GT;\r
&LT;标签=cmbEmp_Name_0&GT; - 选择 - &LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_1类型=复选框NAME =cmbEmp_Name $ 1/&GT;\r
&LT;标签=cmbEmp_Name_1&GT; ANIL VITTHAL GAWADE-312(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_2类型=复选框NAME =cmbEmp_Name $ 2/&GT;\r
&LT;标签=cmbEmp_Name_2&GT; ANURADHA A.德希穆克-53(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_3类型=复选框NAME =cmbEmp_Name $ 3/&GT;\r
&LT;标签=cmbEmp_Name_3&GT; ASMA SIDDIQUI-83(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_4类型=复选框NAME =cmbEmp_Name $ 4/&GT;\r
&LT;标签=cmbEmp_Name_4&GT; DEEPTI MAITHIL-1250(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_5类型=复选框NAME =cmbEmp_Name $ 5/&GT;\r
&LT;标签=cmbEmp_Name_5&GT;高拉夫JHUNJHUNWALA-2222(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_6类型=复选框NAME =cmbEmp_Name $ 6/&GT;\r
&LT;标签=cmbEmp_Name_6&GT; HITESH PANCHAL-253(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_7类型=复选框NAME =cmbEmp_Name $ 7/&GT;\r
&LT;标签=cmbEmp_Name_7&GT; JAGDISH UBARE-362(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_8类型=复选框NAME =cmbEmp_Name $ 8/&GT;\r
&LT;标签=cmbEmp_Name_8&GT; JAIDEEP MAHAKAL-134(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_9类型=复选框NAME =cmbEmp_Name $ 9/&GT;\r
&LT;标签=cmbEmp_Name_9&GT; JASMINE RATHOD-228(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_10类型=复选框NAME =cmbEmp_Name $ 10/&GT;\r
&LT;标签=cmbEmp_Name_10&GT; JIGAR SHAH-358(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_11类型=复选框NAME =cmbEmp_Name $ 11/&GT;\r
&LT;标签=cmbEmp_Name_11&GT;朱奈德·乔杜里-2487(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_12类型=复选框NAME =cmbEmp_Name $ 12/&GT;\r
&LT;标签=cmbEmp_Name_12&GT; KAMAL MATALIA-17(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_13类型=复选框NAME =cmbEmp_Name $ 13/&GT;\r
&LT;标签=cmbEmp_Name_13&GT;科坦NALAWADE-2478(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_14类型=复选框NAME =cmbEmp_Name $ 14/&GT;\r
&LT;标签=cmbEmp_Name_14&GT; KRUPA DAVE-349(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_15类型=复选框NAME =cmbEmp_Name $ 15/&GT;\r
&LT;标签=cmbEmp_Name_15&GT; NEHA ARUN KHANNA-2145(月 - 2016)&LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_16类型=复选框NAME =cmbEmp_Name $ 16/&GT;\r
&LT;标签=cmbEmp_Name_16&GT; Nilesh制作GAIKWAD-903(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_17类型=复选框NAME =cmbEmp_Name $ 17/&GT;\r
&LT;标签=cmbEmp_Name_17&GT; PALLAVI KATHAL-2465(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_18类型=复选框NAME =cmbEmp_Name $ 18/&GT;\r
&LT;标签=cmbEmp_Name_18&GT;拉梅什SANAP-1855(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_19类型=复选框NAME =cmbEmp_Name $ 19/&GT;\r
&LT;标签=cmbEmp_Name_19&GT; SAKINA VIVIAN DSILVA-2392(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_20类型=复选框NAME =cmbEmp_Name $ 20/&GT;\r
&LT;标签=cmbEmp_Name_20&GT; SAMANTHA Saxena先生-2442(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_21类型=复选框NAME =cmbEmp_Name $ 21/&GT;\r
&LT;标签=cmbEmp_Name_21&GT;桑吉塔JIJI RANE-314(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_22类型=复选框NAME =cmbEmp_Name $ 22/&GT;\r
&LT;标签=cmbEmp_Name_22&GT; SARVESH苏巴CHAUDHARY-2462(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_23类型=复选框NAME =cmbEmp_Name $ 23日/&GT;\r
&LT;标签=cmbEmp_Name_23&GT; SAYED苏海尔JAVED AKHTAR-2014(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_24类型=复选框NAME =cmbEmp_Name $ 24/&GT;\r
&LT;标签=cmbEmp_Name_24&GT; SHALIBHADRA HAKANI-2158(四月 - 2016)&LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_25类型=复选框NAME =cmbEmp_Name $十一五/&GT;\r
&LT;标签=cmbEmp_Name_25&GT; SONAL RAVINDRA AMBEDE-2533(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_26类型=复选框NAME =cmbEmp_Name $ 26日/&GT;\r
&LT;标签=cmbEmp_Name_26&GT; SRINIVAS VENKANNA SAMUDRALA-2525(月 - 2016)&LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_27类型=复选框NAME =cmbEmp_Name $ 27号/&GT;\r
&LT;标签=cmbEmp_Name_27&GT; SUNIL DESAI-2484(月 - 2016年)LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_28类型=复选框NAME =cmbEmp_Name $ 28/&GT;\r
&LT;标签=cmbEmp_Name_28&GT; UMANG DARJI-2239(月 - 2016)&LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_29类型=复选框NAME =cmbEmp_Name $ 29/&GT;\r
&LT;标签=cmbEmp_Name_29&GT; Umesh制作VASHISTH-1900(月 - 2016)&LT; /标签&gt;&LT; BR /&GT;\r
\r
&LT;输入ID =cmbEmp_Name_30类型=复选框NAME =cmbEmp_Name $ 30/&GT;\r
&LT;标签=cmbEmp_Name_30&GT; VISHAL苏巴PAWADE-1881(月 - 2016年)LT; /标签&gt;\r
        &LT; / DIV&GT;\r
    &LT; / DIV&GT;\r
&LT; / DIV&GT;\r
&安培;&NBSP放大器; NBSP\r
&LT;输入类型=提交名称=btnSubmit按钮值=过程ID =btnSubmit按钮/&GT;

\r

\r
\r

的通知

我没有实现@Freak他的建议下,禁用一切从用户的第一选择不同的选项。

在另一方面,我还实施的验证按钮,在这里,因为它会检查用户是否可能会或可能不会查了不同月份的检查。以防万一。

I have a DropDownCheckBoxes where I can CHECK multiple items from the list. Now what I want is,

A validation on button click for multiple Items selected must be from the same month if the selected items are not from the same month then it should prompt an alert message for selecting the items as for same month.

For ex:- If first selected item from the list is of April then the user has to select the next item from April only, if other month selected than it should throw an alert message.

Here is the screenshot of my DropDownCheckBoxes

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

Below is my code which I tried first for getting selected value of the list but got an error as

Line: 13 Error: 'options' is null or not an object

See the js fiddle for my code [HERE][2]

kindly suggest what is wrong and how to validate the user on button click for the same.

解决方案

So I took a look at your code. And since I didn't know it you wanted it in plain Javascript or jQuery, I took the liberty of doing it in jQuery (since it's easier).

Also I don't know the true purpose of your code, so I based it upon your example and the information you gave us. This might give you an idea on how to complete your task.

Either run the snippet below or take a look at this 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" />

Notice
I did implement @Freak his suggestion, by disabling all the options different from the user his first choice.

On the other hand, I also implemented the check on the Validate button, where as it will check if the user may or may not have checked a different month. Just in case.

这篇关于Dropdownchecboxes在javascript中选定值的验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆