Develop Reference

JQuery: Getting a series of checkboxes to validate

I'm trying to get a group of checkboxes as part of an overall form I created in the admin area of WordPress to validate. Basically, custom fields. Here's what the code looks like:
<div><label><input type="checkbox" value="0-2" name="_ecp_custom_5[]" /> 0-2</label></div>
<div><label><input type="checkbox" value="3-5" name="_ecp_custom_5[]" /> 3-5</label></div>
<div><label><input type="checkbox" value="6-8" name="_ecp_custom_5[]" /> 6-8</label></div>
and so on.....
So I have this in my JavaScript:
jQuery(document).ready(function($) {
$('[name="_ecp_custom_3"]').attr("required", true);
$('[name="_ecp_custom_5[]"]').prop("checked", true);
});
First line for a text field, works great. But the checked one underneath doesn't work at all. If I submit the form without checking a box, the form still publishes and when it comes back, all the fields are now checked even though I didn't check any of them.
Puzzled what to do in regards to that since there's going to be several rules in this validation function.

If you are using html:
An html element name and id cannot include special characters, such as [ ], and must begin with a letter (A-Z), (a-z).
Aside from that, your jQuery references an element with the name=_ecp_custom_5 and not name=_ecp_custom_5[]. Simply remove the [] in your names and your code will work.
Update
The $('[name=foo]').prop("checked", true) sets all checkboxes with name=foo to checked. I'm a bit confused about what you are asking at this point, since it seems like you are confused about why your form is submitting all checkbox inputs as checked?

You want to require that at least one checkbox is checked, right?
You can iterate all inputs with the name attribute value of "_ecp_custom_5[]" by using jQuery.each(). With that, you can create any flag variable that will be used on any condition.
Please refer to the snippet below if you can't visualize what I am trying to say.
If you want to require that at least one checkbox is checked, you can use this example as your basis
$(function() {
$('#btnValidate').click(function() {
var flag = false;
$.each($('[name="_ecp_custom_5[]"]'), function(index, value) {
var checkboxStatus = $(this).prop('checked');
if (checkboxStatus == true) {
flag = checkboxStatus;
}
});
if (flag == false) {
alert('No checkbox has been checked')
} else {
alert('Success!')
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="checkbox" value="0-2" name="_ecp_custom_5[]" /> 0-2
</label>
</div>
<div>
<label>
<input type="checkbox" value="3-5" name="_ecp_custom_5[]" /> 3-5
</label>
</div>
<div>
<label>
<input type="checkbox" value="6-8" name="_ecp_custom_5[]" /> 6-8
</label>
</div>
<button id="btnValidate" style="margin-top: 20px;">Validate</button>
How I did it?
I iterated all inputs with the name attribute value of "_ecp_custom_5[]".
Then I created a boolean variable named "flag" (default value is false) that is being changed to true only if a checkbox from the iteration has the prop('checked') value of true. If no checkbox has been checked, then the "flag" variable's value will remain false which will then be checked by my condition.

my dynamically populated radio button group gets more than one item checked. so how to solve this.?using HTML,CSS,JS; C#(backend)

my dynamically populated radio button group gets more than one item checked. so how to solve this.?using HTML,CSS,JS; C#(backend).
i wrote a code for list of items with input type as "radio". the values of list item is stored in a Arraylist in backend i.e C#. but when i try to run the code, more than one radio button gets selected.
please help me solve my issue. and even how to check which radio value is selected and how to pass the checked radio value to backend or server.
HTML code
<div class="demo-container size-thin">
<div class="RadListBox RadListBox_Silk" >
<div class="rlbGroup">
<ul>
<%
foreach (var item in dataname)
{
%>
<li>
<input type="radio" />
<img alt="" src="Images/<%=item %>.png"> <%= item%></li>
<%
}
%>
</ul>
</div>
</div>
</div>
Sample frontend visual
i have not writeen any javascript code as of now.

To be clearer than the other answers. All radio buttons in a group must have identical values for their name attribute. This is what groups them together. It's their value attribute that is used to give each button its individual meaning.
Additionally, the name attribute is necessary for any/all form elements that are supposed to submit their value during the submit event. If an element doesn't have the name attribute, it won't send its data.
Once you've made this change, you don't have to worry about how to send the checked radio button's value to the backend server because that will be done automatically when the form that the radio button is in gets submitted.
// Get reference to parent element of first radio button group
var parent = document.querySelector("fieldset:first-child");
// Set up click event handler for it
parent.addEventListener("click", function(e){
// Check to see if the originator of the event was a radio button
if(e.target.nodeName === "INPUT" && e.target.getAttribute("type") === "radio"){
// Get a reference to the checked radio button
console.log("Checked radio button is: " +
document.querySelector("input[type=radio][name=testGroup1]:checked").value);
}
});
<fieldset>
<legend>Group 1</legend>
<label> Choice A<input type="radio" name="testGroup1" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup1" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup1" value="C"></label>
</fieldset>
<fieldset>
<legend>Group 2</legend>
<label> Choice A<input type="radio" name="testGroup2" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup2" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup2" value="C"></label>
</fieldset>

You need to give a name to it
<input type="radio" name="myRadio">
this way the radio know which "group" is it from
input radio

#Sourav,
First, we've to set the name of that radio button.
<input type="radio" name="nameOfThisField">

Make checkboxes required

I already looked to similar questions but I still can't figure out how to fix it. On my webpage, I have some radio checkboxes which I would like to be required before going to the next question.
I have the following partial code:
<p>
Select the option that fits most to you<br><br>
<label>
<input type="radio" name="typesport" value="teamsport" >
I prefer a teamsport</label><br>
<label>
<input type="radio" name="typesport" value="individual">
I prefer an individual sport</label><br>
</p>
Next question
Can someone help me with getting a javascript code, that actually works for all radio-boxes, where you could only go to the next question when 1 radio-box is selected?
Cheers,
Max
Edit: What I've tried so far is the following:
I added "required" to the label, so it looked like this:
<label><input type="radio" name="typesport" value="teamsport" required> I prefer a teamsport</label><br>
I also added the ID to the button:
Next question
Furthermore, I used this JS script:
$(document).ready(function () {
$('#checkBtn').click(function() {
checked = $("input[type=radio]:checked").length;
if(!checked) {
alert("You must check at least one radio.");
return false;
}
});
});
However, this works fine for only one question. When I add this to all the other questions, I still can go to the following question when I click on the button Next question, and that is not what I want.

Radio boxes are fairly simple in nature in that you should always have at least one option in a radio-group checked by default. Preferably a N/A or 'Please Select' option.
In which case you would want to validate against the 'Please Select' option instead:
//when user clicks <a> element
$(".next-button").click(function() {
//group on radio button name and test if checked
if ($("input[name='typesport']:checked").val() == 'select') {
alert('Nothing is checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Select the option that fits most to you<br><br>
<label><input type="radio" name="typesport" value="select" checked="true" > Please Select </label><br>
<label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
<label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
Next question
However
If you really want to validate that an option has been checked:
This should work:
//when user clicks <a> element
$(".next-button").click(function()
{
//group on radio button name and test if checked
if (!$("input[name='typesport']:checked").val()) {
alert('Nothing is checked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Select the option that fits most to you<br><br>
<label><input type="radio" name="typesport" value="teamsport" > I prefer a teamsport</label><br>
<label><input type="radio" name="typesport" value="individual"> I prefer an individual sport</label><br>
</p>
Next question

HTML5 supports the required attribute for radio buttons. I did some searching and HTML5: How to use the "required" attribute with a "radio" input field has more detailed information about this attribute.

You can set a radio button checked by default by using the checked attribute.
To check if it's checked or not, use this code :
if ($('input[name=typesport]').attr('value') != undefined) {
//execute code when it is checked
} else {
//execute code when it's not checked
}

Clear Checkbox when Radio Button selection is Changed

I am using a form builder with field IDs in Wordpress. I need to uncheck a specific checkbox if a specific radio button selection is changed. The radio button's field ID is 180. The checkbox's field ID is 640. Here's what I tried first:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('input[name="item_meta[640]"]').val('');
})
})
</script>
Note that this script was originally written to change the value of a dropdown, not a menu. The only change I made to the code was changing "select" to "input" on line 3.
I've also tried changing
.val('');
to
.attr('checked', false);
and also to
.removeAttr('checked');
None of these work. The checkbox remains checked when the radio button is changed. Does anyone have any ideas? Thanks in advance!
UPDATE: Here are the two relevant form fields in HTML:
<div id="frm_field_180_container" class="frm_form_field form-field frm_required_field frm_top_container">
<label class="frm_primary_label">Pricing Categories
<span class="frm_required">*</span>
</label>
<div class="frm_description">Select your meta-category then locate your entry fee in the subsequent dropdown.</div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-0" value="Independent Film & Videos" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-0">Independent Film & Videos</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-1" value="Film / Video for TV & Cable Production" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-1">Film / Video for TV & Cable Production</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-2" value="TV Ads, PSAs, Screenplays, New Media, Websites, etc." class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-2">TV Ads, PSAs, Screenplays, New Media, Websites, etc.</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-3" value="Student Entry of Any Category (with 2 Additional Categories Free) - $45" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-3">Student Entry of Any Category (with 2 Additional Categories Free) - $45</label></div>
</div>
and
<div id="frm_field_640_container" class="frm_form_field form-field frm_top_container frm_last_third">
<label class="frm_primary_label">Apply Early-Bird Discount
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_640-0"><input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" /><label for="field_640-0">1-3 Categories: $5</label></div>
</div>

The following approach appears to work:
$('input[name="item_meta\\[180\\]"]').change(function(){
$('input[name="item_meta\\[640\\]\\[\\]"]').prop('checked',false);
});
JS Fiddle demo.
Note that I removed the onclick (since they weren't defined, their absence generated errors, and if you're using jQuery why are you even using in-line event-handlers?). Also, the escaping of the square-brackets (using the \\ characters).
References:
prop().

You've got a mismatch for the name of the checkbox, between your HTML and your JQuery . . .
HTML
<input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" />
Here, the name attribute is item_meta[640][].
JS
$('input[name="item_meta[640]"]').val('');
Here, the name attribute is item_meta[640].
Because of that, the selector is not matching the checkbox. If you update you JQuery selector to $('input[name="item_meta[640][]"]'), it should work fine.
As noted by Dave Thomas, you are better going with .prop('checked', false); to uncheck the box.

validate field in javascript and jquery

I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.

Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/

You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)