Develop Reference

Find elements by multiple names jQuery

I have these 4 checkboxes and I want to find them in jQuery by their names.
Is there any way to find all 4 checkboxes by their name?
<input type="checkbox" value="1" id="RangeFlexionRightSide1" name="RangeFlexionRightSide">
<input type="checkbox" value="2" id="RangeFlexionRightSide2" name="RangeFlexionRightSide">
<input type="checkbox" value="1" id="ManualFlexionRightSide1" name="ManualFlexionRightSide">
<input type="checkbox" value="2" id="ManualFlexionRightSide2" name="ManualFlexionRightSide">
I am trying these below codes but I didn't get the result:
$("input[name^='Range Manual']").length
$("input[name^='Range,Manual']").length
$("input[name^='Range'][name^='Manual']").length

Yes you could use the ending by selector $= like :
$("input:checkbox[name$='FlexionRightSide']").length
Or using start with selctor ^= like :
$("input:checkbox[name^='Range'],input:checkbox[name^='Manual']").length
NOTE : You could give them a common class, and select them easely using class selector . like :
$('.common_class').length
console.log($("input:checkbox[name$='FlexionRightSide']").length); //4
console.log($("input:checkbox[name^='Range'],input:checkbox[name^='Manual']").length); //4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="RangeFlexionRightSide1" name="RangeFlexionRightSide">
<input type="checkbox" value="2" id="RangeFlexionRightSide2" name="RangeFlexionRightSide">
<input type="checkbox" value="1" id="ManualFlexionRightSide1" name="ManualFlexionRightSide">
<input type="checkbox" value="2" id="ManualFlexionRightSide2" name="ManualFlexionRightSide">

You can do that with *= which will check if name contains value passed.
Or you can do as your way with ^= as shown below.
In jQuery selectors
[name^='Range'] - Here ^= find element whose name starts with Range.
[name$='Range'] - Here $= find element whose name ends with Range.
[name*='Range'] - Here *= find element whose name contains Range.
Find more about jQuery Selector here.
console.log($("input[name^='Range'], input[name^='Manual']").length);
console.log($("input[name*='RightSide']").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" id="RangeFlexionRightSide1" name="RangeFlexionRightSide">
<input type="checkbox" value="2" id="RangeFlexionRightSide2" name="RangeFlexionRightSide">
<input type="checkbox" value="1" id="ManualFlexionRightSide1" name="ManualFlexionRightSide">
<input type="checkbox" value="2" id="ManualFlexionRightSide2" name="ManualFlexionRightSide">

I guess this is what you need:
$("input[name^='Range'],input[name^='Manual']").length

Validating if atleast one checkbox is checked or one input field is filled

I need better validation logic, where some Checkboxes and some input fields are grouped together.
The user either have to check at least one checkbox or have to fill at least one input box.
If a checkbox is checked or an input field is filled then the complete group is validated.
What will be the best possible way to validate such a situation?
e.g
<input class="checkbox" type="checkbox" name="check-deal" value="1" grouped="deal" >
<input class="checkbox" type="checkbox" name="check-deal" value="2" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="3" grouped="deal">
<input class="checkbox" type="checkbox" name="check-deal" value="4" grouped="deal">
<input class="input-group" type="text" name="deal-name1" value="" grouped="deal">
<input class="input-group" type="text" name="deal-name2" value="" grouped="deal">
I have defined an extra attribute grouped for all input and checkboxes that should be grouped togather
but getting no idea how to validate the group as best practice.

DEMO
Point No.1 : There isn't any attribute called grouped for html as of my knowledge but I would suggest you to use data-* prefixed attribute names like data-grouped or data-anyname which is valid
Point No.2 : I rather categorized your checkboxes and textboxes into separate divs and below is how it is:
<div class="chkbox">
<input class="checkbox" type="checkbox" name="check-deal" value="1" />
<input class="checkbox" type="checkbox" name="check-deal" value="2" />
<input class="checkbox" type="checkbox" name="check-deal" value="3" />
<input class="checkbox" type="checkbox" name="check-deal" value="4" />
</div>
<div class="txtbxs">
<input class="input-group" type="text" name="deal-name1" value="" />
<input class="input-group" type="text" name="deal-name2" value="" />
</div>
<button class="btnValidate">Validate</button>
Point No.3 : Below is how you can validate using jquery
$('.btnValidate').on('click',function(){
var chkLength=$('.chkbox .checkbox:checked').length; //get checkbox checked length
var filledText=$(".txtbxs .input-group").val()!="";
//get bool value whether any of the text box is filled or not
if(chkLength || filledText) //check with or condition
alert('valid')
else
alert('invalid');
});
UPDATE
DEMO
As #AkshatG pointed in his answer the discrepancy was there in my answer so I've edited it and here is the updated solution.
$('.btnValidate').on('click',function(){
var chkLength=$('.chkbox .checkbox:checked').length;
var filledText=false; //First set it to false
$.each($(".txtbxs .input-group"),function(index,value){
if($(value).val()!="")
{
filledText=true//if it finds any value then set it to true
return;//break from $.each
}
})
if(chkLength || filledText)
alert('valid')
else
alert('invalid');
});

You first need to take count of each validations. And then check if any of the two has count greater than 0 or not. Guruprasad's answer won't work if you enter text on second textbox because it won't filter all the textboxes. You have to use filter function for this :
$("input[type='text'],textarea").filter(function() {
return $(this).val() != "";
}).length;
Here's a jsfiddle :
http://jsfiddle.net/myfLgpdv/
Hope this helps.

Must check last three check boxes to submit

Below is my list of check boxes that is part of my php form. I need to write a script where only the last three check boxes must be checked for the form to be successfully submitted. I have looked at other similar questions but can't seem to find what I am truly looking for and I am having trouble to write the script.
<input type="checkbox" name="checkbox" value="Send email request">Would you like to receive weekly new via email?<br>
<input type="checkbox" name="checkbox" value="Agree to T&C">I agree to the Terms and Conditions<br>
<input type="checkbox" name="checkbox" value="No Criminal Records">I have no criminal associations<br>
<input type="checkbox" name="checkbox" value="No Business with any other company">I have no personal or business relationship with any other company<br>

You do not need to use any JavaScript.
Simply add a required attribute to the input elements.
<input type="checkbox" required="required" name="checkbox" value="Send email request">Would you like to receive weekly new via email?<br>
Take a look here for more info: http://www.the-art-of-web.com/html/html5-checkbox-required/
If you want a custom message or response, then you will need to use JavaScript to handle this.

Alternatively, you could use jQuery to check if it is indeed that the last 3 checkboxes or are checked (required) before submission. Consider this example:
<form method="POST" action="index.php" id="form">
<input type="checkbox" name="checkbox[]" value="Send email request">Would you like to receive weekly new via email?<br>
<input type="checkbox" name="checkbox[]" value="Agree to T&C">I agree to the Terms and Conditions<br>
<input type="checkbox" name="checkbox[]" value="No Criminal Records">I have no criminal associations<br>
<input type="checkbox" name="checkbox[]" value="No Business with any other company">I have no personal or business relationship with any other company<br>
<input type="submit" name="submit" />
</form>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').submit(function(e){
var count = 0;
var required_indeces = [1,2,3];
$('input[type=checkbox]').each(function(index, element){
if($.inArray(index, required_indeces) !== -1 && $(this).is(':checked')) {
count++;
}
});
if(count < 3) {
e.preventDefault();
}
});
});
</script>

The checkboxes need to have different names. Using the same name means you are only storing the value of the last checked box. Try one of these two options (for PHP):
<input type="checkbox" name="checkbox[]" value="Send email request">Would you like to receive weekly new via email?<br>
<input type="checkbox" name="checkbox[]" value="Agree to T&C">I agree to the Terms and Conditions<br>
<input type="checkbox" name="checkbox[]" value="No Criminal Records">I have no criminal associations<br>
<input type="checkbox" name="checkbox[]" value="No Business with any other company">I have no personal or business relationship with any other company<br>
Then, to check that the last three are checked:
if (!isset($_POST['checkbox'][1], $_POST['checkbox'][2], $_POST['checkbox'][3])) {
echo 'One of the last 3 NOT checked!';
}
OR:
<input type="checkbox" name="checkbox1" value="Send email request">Would you like to receive weekly new via email?<br>
<input type="checkbox" name="checkbox2" value="Agree to T&C">I agree to the Terms and Conditions<br>
<input type="checkbox" name="checkbox3" value="No Criminal Records">I have no criminal associations<br>
<input type="checkbox" name="checkbox4" value="No Business with any other company">I have no personal or business relationship with any other company<br>
Then:
if (!isset($_POST['checkbox2'], $_POST['checkbox3'], $_POST['checkbox4'])) {
echo 'One of the last 3 NOT checked!';
}

Find Selected Radio Button Value Based on Multiple Attribute Selection

I have 3 different Radio Buttons in a page with the following code
<input type="radio" name"1" value="1">1</input>
<input type="radio" name"2" value="2">2</input>
<input type="radio" name"3" value="3">3</input>
How can I get the value of the selected radio button with different names ?
I tried
var option = $("input[type='radio'][name='1']:checked").val();
But giving Undefined. Any Idea's ?

You need to have them be the same name, otherwise they don't work as radios (they could all be selected), and you need your html to be valid:
<input type="radio" name="1" value="1">1
<input type="radio" name="1" value="2">2
<input type="radio" name="1" value="3">3

You're missing the = when assigning the name attribute.
<input type="radio" name="1" value="1" />
<!-- ^
Also, as others have pointed out in comments, input tags are self-closing. (although it does work even with invalid html)
Demo: http://jsfiddle.net/g7RT2/

You missed "=" sign after the "name" attribute, selector doesn't match name=1 condition: <input type="radio" name"1" value="1">1</input>
http://jsfiddle.net/gLgBj/

here is a working fiddle
http://jsfiddle.net/mW7mk/
your html is not well formated, the input is self closed and name="1" not name"1"
var options = $("input[type='radio'][name='1']:checked").val();
alert("test : " + options);
worked just fine with :
<label><input type="radio" name="1" value="1" checked="checked"/>1</label>
<label><input type="radio" name="2" value="2"/>2</label>
<label><input type="radio" name="3" value="3"/>3</label>

jQuery selector for dynamic input name

I have a set of checkboxes that have a name like
form[check][..]
where .. is a number (id). I would have another checkbox that checked would check all the previous checkboxes, a sort of check/uncheck all. The problem is, how can with jQuery get all that checkboxes?
EDIT 1
this is my current html markup:
<input type="checkbox" value="1" name="form[check][1]" />
<input type="checkbox" value="1" name="form[check][2]" />
<input type="checkbox" value="1" name="form[check][3]" />
<input type="checkbox" value="1" name="form[check][..]" />
<input type="checkbox" name="checkAll" />

Add a class to the checkboxes you want checked, and select them using that class
$('.myCheckbox').prop('checked', true);

$('[name="checkAll"]').on('change', function(){
$('input[name^="form[check]"]:checkbox').prop('checked', $(this).prop('checked'));
});​