Develop Reference

multiple check boxes to enable/disable just one selector in javascript

I am trying to make a selector available, only if a check box, or more than one are checked. The selector should go back to being disabled if the user unchecks all the checkboxes.
I was trying to implement my solution from this response (that it works perfect for one checkbox paired with any other selector) ; however, when I implement it like this:
$(document).ready(function(){
var enable_sel = function(){
$("#pizza_kind").prop("disabled", !$(":checkbox").prop("checked"));
};
enable_sel();
$(":checkbox").change(enable_sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="p1" name="p1">
<input type="checkbox" id="p2" name="p2">
<input type="checkbox" id="p3" name="p3">
<select name="pizza_kind" id="pizza_kind">
<option>(choose one)</option>
<option>"Hawaian"</option>
<option>"Peperonni"</option>
<option>"Another"</option>
</select>
</form>
I got the selector disabled, but it seems that is only reacting to the first checkbox, not the rest of them.
I couldn't make this work in the javascript/html snippet, don't know why.
I am currently using Flask and jquery 3.6.0
What am I doing wrong?

When you read a prop from a collection it will only ever select the first one. It is not going to randomly pick the one you want, so you need to tell it exactly what to pick.
So select the checked checkboxes and check the length. To do this use :checked in the selector and it will pick the ones that are checked.
$(document).ready(function(){
var enable_sel = function(){
$("#pizza_kind").prop("disabled", !$(":checkbox:checked").length);
};
enable_sel();
$(":checkbox").change(enable_sel);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="p1" name="p1">
<input type="checkbox" id="p2" name="p2">
<input type="checkbox" id="p3" name="p3">
<select name="pizza_kind" id="pizza_kind">
<option>(choose one)</option>
<option>"Hawaian"</option>
<option>"Peperonni"</option>
<option>"Another"</option>
</select>
</form>

If I select first checkbox then disable all remaining checkboxes

I have four check boxes inside a separate label.
If I select first check box then all remaining check boxes will be disable. If I click first again, all check boxes will be enabled.
If I select any other check box, the others are still enabled: I can select more than one. See image here
How can I set this up?

Try this:
HTML:
<label for="one"><input type="checkbox" name="one" id="one"></label>
<label for="two"><input type="checkbox" name="two" id="two"></label>
<label for="three"><input type="checkbox" name="three" id="three"></label>
<label for="four"><input type="checkbox" name="four" id="four"></label>
jQuery:
$('input[type="checkbox"]').on('change', function() {
if($('input[type="checkbox"]').eq(0).is(':checked')){
$('input[type="checkbox"]').not($(this)).attr('disabled', true);
}
else{
$('input[type="checkbox"]').not($(this)).attr('disabled', false);
}
});
Working example: https://jsfiddle.net/e26vnnk2/

If you are asking in order to find out how to disable all other "checkboxes," use radiogroups. If you are saying that the first checkbox auto-triggers a toggle on the other checkboxes, try ungrouping them, or making them separate in and of themselves, because it sounds as if you have some kind of faulty grouping and dependency there.

Javascript does not recognize HTML arrays

How to pass this kind of HTML input to JavaScript so that it recognizes these array values?
<input type="checkbox" id="collection[]" value="0">
<input type="checkbox" id="collection[]" value="1">
<input type="checkbox" id="collection[]" value="2">]
The only idea I have (never played with js this way, tbh) is to reach it through:
$("#collection").val();
But I got undefined error. I have no other idea how to make javascript recognize that variable collection is an array and has to passed as such.
Thanks in advance!

Remember, IDs need to be unique within your document. So set by 'name' not by id.
You can use
$('#someid').is(":checked");
for individually checking each checkbox, or loop through them with a jQuery selector
To loop through them set
<input type="checkbox" name="checkboxes" value="0">
<input type="checkbox" name="checkboxes" value="1">
<input type="checkbox" name="checkboxes" value="2">
Then with jQuery,
$('input[name=checkboxes]:checked').each(function(i, e) {
e.val(); //The value of the checkbox that is selected
});

You cannot have Duplicate Ids. Though duplicate IDs will give you desired output in this case, it is invalid to use them for multiple elements.
<input type="checkbox" name="collection[]" value="0">
<input type="checkbox" name="collection[]" value="1">
<input type="checkbox" name="collection[]" value="2">
There are many ways you can access array based elements.
jQuery .map(): Alternative is .each()
Demo
$("[name='collection[]']").map(function(){return $(this).val();}).get()
Working Demo for checking checked inputs.
To get the checked checkbox,
$('input').change(function () {
console.log($("[name='collection[]']:checked").map(function () {
return $(this).val();
}).get());
});

$("#collection")
It mean's ,"Find me an element which id's equal collection on page" , of course it can't find anything. You can use .each function and you can use checkboxes attributes. For example ;
var myCheckBoxArray = []
$("input[type='checkbox']").each(function(i,elm){
myCheckBoxArray.push(elm);
});

javascript jquery radio button click

I have 2 radio buttons and jquery running.
<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second
Now, with a button I can set onClick to run a function. What is the way to make radio buttons run a function when I click on one of them?

You can use .change for what you want
$("input[#name='lom']").change(function(){
// Do something interesting here
});
as of jQuery 1.3
you no longer need the '#'. Correct way to select is:
$("input[name='lom']")

If you have your radios in a container with id = radioButtonContainerId you can still use onClick and then check which one is selected and accordingly run some functions:
$('#radioButtonContainerId input:radio').click(function() {
if ($(this).val() === '1') {
myFunction();
} else if ($(this).val() === '2') {
myOtherFunction();
}
});

<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>
$("input[name='radio']:checked").val()

this should be good
$(document).ready(function() {
$('input:radio').change(function() {
alert('ole');
});
});

There are several ways to do this. Having a container around the radio buttons is highly recommended regardless, but you can also put a class directly on the buttons. With this HTML:
<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>
you can select by class:
$(".shapeButton").click(SetShape);
or select by container ID:
$("#shapeList").click(SetShape);
In either case, the event will trigger on clicking either the radio button or the label for it, though oddly in the latter case (Selecting by "#shapeList"), clicking on the label will trigger the click function twice for some reason, at least in FireFox; selecting by class won't do that.
SetShape is a function, and looks like this:
function SetShape() {
var Shape = $('.shapeButton:checked').val();
//dostuff
}
This way, you can have labels on your buttons, and can have multiple radio button lists on the same page that do different things. You can even have each individual button in the same list do different things by setting up different behavior in SetShape() based on the button's value.

it is always good to restrict the DOM search. so better to use a parent also, so that the entire DOM won't be traversed.
IT IS VERY FAST
<div id="radioBtnDiv">
<input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
<input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>
$("input[name='myButton']",$('#radioBtnDiv')).change(
function(e)
{
// your stuffs go here
});

In jQuery, how do I select an element by its name attribute?

I have 3 radio buttons in my web page, like below:
<label for="theme-grey">
<input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
<input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
<input type="radio" id="theme-green" name="theme" value="green" />Green</label>
In jQuery, I want to get the value of the selected radio button when any of these three are clicked. In jQuery we have id (#) and class (.) selectors, but what if I want to find a radio button by its name, as below?
$("<radiobutton name attribute>").click(function(){});
Please tell me how to solve this problem.

This should do it, all of this is in the documentation, which has a very similar example to this:
$("input[type='radio'][name='theme']").click(function() {
var value = $(this).val();
});
I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.

To determine which radio button is checked, try this:
$('input:radio[name=theme]').click(function() {
var val = $('input:radio[name=theme]:checked').val();
});
The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val.
Update: After posting I decided that Paolo's answer above is better, since it uses one less DOM traversal. I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible.

$('input:radio[name=theme]:checked').val();

another way
$('input:radio[name=theme]').filter(":checked").val()

This works great for me. For example you have two radio buttons with the same "name", and you just wanted to get the value of the checked one. You may try this one.
$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

The following code is used to get the selected radio button value by name
jQuery("input:radio[name=theme]:checked").val();
Thanks
Adnan

For anyone who doesn't want to include a library to do something really simple:
document.querySelector('[name="theme"]:checked').value;
jsfiddle
For a performance overview of the current answers check here

I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.
With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.
To do the above now just replace the :radio with [type=radio].
So your answer now becomes for all versions of jQuery 1.8 and above:
$("input[type=radio][name=theme]").click(function() {
var value = $(this).val();
});
You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.

If you'd like to know the value of the default selected radio button before a click event, try this:
alert($("input:radio:checked").val());

You can use filter function if you have more than one radio group on the page, as below
$('input[type=radio]').change(function(){
var value = $(this).filter(':checked' ).val();
alert(value);
});
Here is fiddle url
http://jsfiddle.net/h6ye7/67/

<input type="radio" name="ans3" value="help">
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">
<input type="radio" name="ans2" value="test">
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">
<script type="text/javascript">
var ans3 = jq("input[name='ans3']:checked").val()
var ans2 = jq("input[name='ans2']:checked").val()
</script>

If you want a true/false value, use this:
$("input:radio[name=theme]").is(":checked")

Something like this maybe?
$("input:radio[name=theme]").click(function() {
...
});
When you click on any radio button, I believe it will end up selected, so this is going to be called for the selected radio button.

I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button:
$("input:radio[type=radio]").click(function() {
var value = $(this).val();
alert(value);
});
Cheers!

can also use a CSS class to define the range of radio buttons and then use the following to determine the value
$('.radio_check:checked').val()

This worked for me..
HTML:
<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>
Jquery:
$(".radioClass").each(function() {
if($(this).is(':checked'))
alert($(this).val());
});
Hope it helps..

$('input:radio[name=theme]').bind(
'click',
function(){
$(this).val();
});

You might notice using class selector to get value of ASP.NET RadioButton controls is always empty and here is the reason.
You create RadioButton control in ASP.NET as below:
<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />
And ASP.NET renders following HTML for your RadioButton
<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>
For ASP.NET we don't want to use RadioButton control name or id because they can change for any reason out of user's hand (change in container name, form name, usercontrol name, ...) as you can see in code above.
The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following
$('span.radios input:radio').click(function() {
var value = $(this).val();
});