Please help anyone,There is a problem in jQuery code that i am not able to find out.
There is 4 checkboxes 1 button and one span control.There should be checked max 3 checkbox if its above select then there will be a message "You can not select more than 3 options" If no any checkbox select and button click, there should be a message "Please select any 3 options" and if we select and click on button then that checkboxes text and values should be apper on span element.
But problem is that checkboxes texts and values apper twice in the span control. I want to show only once the text and value.
Html code:---
<form id="form1" runat="server">
<b>Select Options</b><br />
<input type="checkbox" id="chk1" value="opt1" name="Options" />
<label for="chk1">Option1</label>
<input type="checkbox" id="chk2" value="opt2" name="Options" />
<label for="chk2">Option2</label>
<input type="checkbox" id="chk3" value="opt3" name="Options" />
<label for="chk3">Option3</label>
<input type="checkbox" id="chk4" value="opt4" name="Options" />
<label for="chk4">Option4</label><br />
<input type="button" id="btnSubmit" value="Submit" /><br />
<span id="span1"></span>
</form>
jQuery Code:---
<script src="Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("input:checkbox[name=Options]").change(function () {
if ($("input:checkbox[name=Options]:checked").length > 3) {
alert("You can not select more than 3 options");
$(this).prop("checked",false)
}
});
$("#btnSubmit").click(function () {
if ($("input:checkbox[name=Options]").is(":checked")) {
var texts = "";
var values = "";
$("input:checkbox[name=Options]:checked").each(function () {
values += $(this).val() + ",";
texts += $("label[for=" + $(this).prop("id") + "]").text() + ",";
});
values += values.substring(0, values.length - 1);
texts += texts.substring(0, texts.length - 1);
$("#span1").html("<b style='color:green'>Selected Options</b><br/><b>Texts :</b>" + texts + "<br/><b>Values :</b>" + values);
}
else {
$("#span1").html("<b style='color:red'>Please Select any Max 3 Option</b>");
}
});
});
</script>
Thanks and Regards,
Krishna Kumar Maurya
Thanks and Regards,
Krishna Kumar