Develop Reference

jQuery returns UNDEFINED or ON as Input Value

I have problem to get input value with jQuery.
Final Edit:
problem solved.
damnnn, i missed
=
for value attribute in input tag,
i struggled a lot with this silly mistake.. laughing emoji..
If i use
$("input[name=xxx]:checked").attr("value");
it returns UNDEFINED
If i use
$("input[name=xxx]:checked").val();
it returns ON(an error, not value.)
Edit:
Input created dynamically with js.
<div id="ab">
<input type="checkbox" name="aaa" value="apple">apple
<input type="checkbox" name="aaa" value="banana">banana
<input type="checkbox" name="aaa" value="grapes">grapes
<input type="checkbox" name="aaa" value="pista">pista
<input type="checkbox" name="aaa" value="badam">badam
<input type="checkbox" name="aaa" value="fruit">fruit
</div>
<div id="abcd"></div>
and after checked some of above, then below one,
var data="";
$('input[name=aaa]:checked').each(function() {
data += $(this).attr('value')+": <label class=\"badge badge-secondary mx-1\"><input type=\"radio\" name=\"xxx\" value\""+$(this).attr('value')+"\">A</label><label class=\"badge badge-secondary rounded-circle mx-1\"><input type=\"radio\" name=\"yyy\" value\""+$(this).attr('value')+"\">B</label>";
});
$('#abcd').html(data);
that one created content well correctly, but finally have problem in getting value of that checked radios,(user can select only two among different items).
some jQuery functions doesn't work for dynamically generated content like,
$("#xxx").click(function(){});
that one doesn't work for content created with js after page load,
$("body").on("click", "#xxx", function(){});
this one works for content created with js after page load,
maybe, similarly, there will be another one to get Input values that are created with js after page load.

If a value isn't specified in the element, the default values of a checkbox are "on" and "off". If the checkbox is supposed to have some specific meaning, you can specify that in the value attribute.
For example, let's say we want the user to check the box if they're over 18 years old. We could do something like:
<input id="checkbox" type="checkbox" value="over 18"/>
Then, when you query its value, $("#checkbox").attr("value"), you'll get "over 18".
If you don't want to specify a value that way, and you are using a label for the text next to the checkbox, you could do something like this:
HTML:
<input type="checkbox" id="checkbox" name="checkbox"/>
<label for="checkbox">Over 18?</label>
JS:
let text = $("label[for=checkbox]").text();
That will give you the label text, which is "Over 18?".
Update
For OPs updated case, you might be able to use something like $(staticAncestors).on(eventName, dynamicChild, function() {}); via jQuery.
Example:
First, assign a class name to the class attribute when the checkboxes are created dynamically (e.g., class = "your_class_name").
Then, do something like:
$(document).on('click', '.your_class_name', function() {
console.log($(this).is(':checked'));
// Do something with selected element
});
See https://api.jquery.com/on/#on-events-selector-data-handler, especially the section on Direct and delegated event handlers
Hope this helps.

Use
$("input[name=xxx]:checked")[0].value
Because it may return array of inputs so you must select first from array

How to expand/collapse list of information in a webpage using a link

I am new to web programming and wants to create a link that will expand and collapse a list of information. I was able to do this using radio buttons as shown in the following example bellow.
Instead of using a radio button or a regular button, can you please tell me how can I achieve this same feature using a clickable link. Ex: + More
Please show me with an example if possible.
<script type="text/javascript">
function OnChangeCheckbox1 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'none';
document.getElementById(checkbox.id).style.display = 'none';
}
}
function OnChangeCheckbox2 (checkbox) {
if (checkbox.checked) {
document.getElementById(checkbox.name).style.display = 'block';
document.getElementById(checkbox.value).style.display = 'block';
}
}
</script>
* Some Information about X<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid1" value="lessid1" onclick="OnChangeCheckbox2 (this)" />+ More</label>
<span style="display:none" id="moreid1" ><label for="id_advisor">First some text<br>First more text</label></span>
<label style="display:none" class="radio" id="lessid1"><input id="lessid1" type="radio" name="moreid1" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br>
* Some Information about Y<br>
<label class="radio"><input id="id_clasification2" type="radio" name="moreid2" value="lessid2" onclick="OnChangeCheckbox2 (this)" > + More</label>
<span style="display:none" id="moreid2" ><label for="id_advisor">Second Some text<br>Second more text</label></span>
<label style="display:none" class="radio" id="lessid2"><input id="lessid2" type="radio" name="moreid2" value="Staff/Faculty" onclick="OnChangeCheckbox1 (this)"/>- Less</label>
<br><br><br>
Aditional Information goes here
Working Code: https://jsfiddle.net/hey4769/owpat8zf/

While it's an idea to use value/name/id attributes, please be aware this does not work for all elements. Also name attribute (at least for some elements) is deprecated in html5.
So I've chosen to use data attributes. And, as I'm spoiled with using jQuery, I decided to test some things in javascript, and included 2 different functions, one using this and another passing the event.
For selecting the elements to show/hide I've used document.querySelector, which works like a css selector.
I'm also changing the text on the a element after clicking it. Last I've added some console logs. Hope it's useful!
https://jsfiddle.net/hamu21gj/

you can you href to add your javascript like this:
href="javascript:MyFunction"
I changed your code a little bit just to make an example.
https://jsfiddle.net/owpat8zf/3/

Auto-select Radio Button with Text Field?

Did lots of searching on here and found plenty of people with similar questions, but every 'solution' I have found fails to work in my case. I could be missing something simple, or it may have to do with our HTML. Basically, I want our text field to check it's corresponding radio button should someone enter a value there.
Here is a JSFiddle with what I want working, but when I put host it on a server for testing I don't get the same result.
JSFiddle
http://jsfiddle.net/p8kvQ/39/
HTML
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice1" value="47" checked="checked" />
<label for="UnitPrice1">$47</label>
</div>
<div>
<input type="radio" name="UnitPrice1" id="UnitPrice2" value="Other" />
<label for="UnitPrice2">Other</label>
<input class="-input-width-auto" name="Other1" type="number" id="Other1" />
</div>
JS
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
I DO have "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" defined in our HTML header and I've tried adding the code by defining its source file, but still no luck.
Any help would be great.

Your JS needs to be inside a document.ready. When the code is run, the dom element is not available, there for your click listener can not be attached it it.
$( document ).ready(function() {
$('#Other1').click(function(){
$('#UnitPrice2').trigger('click');
});
});
(JSFiddle does this for you because you have the following setting: http://screencast.com/t/5WUC33diHpTb)

How to hide checkbox text

I have been playing around with html lately and ran into a slight issue.
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?

I would suggest using the <label>-tag around the whole thing:
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
Also note that status is not a valid attribute. For styling use style.

Wrap the input in a div and apply the "style" tag to the div.
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>

you need to wrap it in a span/label and then hide it
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>

Place checkbox inside div and apply style to div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>

<span style="display:none"><input ...>Option 1</span>
or better
<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>

I'm sure you mean style="display:none and not status, but here goes:
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>

<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
$('label[for="check1"]').hide();

try something like this
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>

Use the below to get your desired need.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used status instead of style but by using the code above you'll do fine.

Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic.
First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag.
As all the other answers here wrote, you obviously need a label with your input tag:
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
/J.

Rails: two radio selects on same source list

Wondering how to approach this... Best to look at the picture to visualize the, hopeful, UI for a form for choosing options in a list. Users need to be able to make a first choice and a second choice for each option. One and only one can be selected in each column, and for that matter, each row.
At first I thought, naturally, 2 radio button groups might work...but not sure how? Perhaps hidden radio_buttons whose values are manipulated via Javascript/JQuery in a click event on each div? Event should also check/handle "collisions" when user tries to select same option for both choices.
Or, would this perhaps be better with two hidden collection_selects...or even simpler, just two hidden text_fields...which javascript can populate with the ID of the selected option?
Or maybe I'm overlooking something more obvious.
I'm new(ish) to javascripting with Rails so looking for advice/validation.
Thanks.

I think something like this is what your looking for:
HTML:
<form>
<p class="exclusiveSelection">
Selection One
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Two
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<p class="exclusiveSelection">
Selection Three
<input type="radio" name="firstColumn"/>
<input type="radio" name="secondColumn"/>
</p>
<input type="button" id="submitForm" value="Submit">
</form>
JavaScript:
$(function() {
$(".exclusiveSelection input[type='radio']").click(function() {
$exclusiveSelection = $(this).parent();
$('input[type='radio']', $exclusiveSelection).attr('checked', false);
$(this).attr('checked', true);
});
});
It ensures that the values are unique across column and row and works with jQuery 1.2.6 - 1.7.1. There is also a JSFiddle example.
If you need help adapting this for Rails let me know, however it should be straight forward.