Develop Reference

Jquery: limit user to select only two radio options at once and display values inside divs

I am developing a product comparator where user have to select only two products within a universe with 4 products for example.
In this case, the user would select two products within this universe with 4 products and the information of these selected products would appear inside columns (column 1 and column 2).
I tried to research some similar questions here, but unfortunatly i didn't find a correct way to do that:
Get two values from select option at once
Select and Radio options to show div
Two radio buttons are selecting at once
My question is: How can i select only two radio options, always limiting only two selections? Also, how can i display radio values from selected options inside column 1 and the second selected product inside column 2?
Below is the code that i'm using:
HTML structure that display 4 products with their respective radio buttons:
<h2 class="mb-3">Produtos</h2>
<div class="row justify-content-center">
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto1" id="1" value="Tênis preto">
<label class="form-check-label" for="1"></label>
</div>
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto2" id="2" value="Tênis branco">
<label class="form-check-label" for="2"></label>
</div>
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto3" id="3" value="Tênis verde">
<label class="form-check-label" for="3"></label>
</div>
<div class="col-2">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px"/>
<input class="form-check-input radio" type="radio" name="produto4" id="4" value="Tênis azul">
<label class="form-check-label" for="4"></label>
</div>
</div>
<div id="coluna1"></div>
<div id="coluna2"></div>
Below is jquery code that takes the values ​​of the selected items and display their information in respective columns. These code not allow to select more than two products:
$('.radio').change(function(){
var shoes = $(this).val();
var count = $("input[type='radio']:checked").length;
if(count > 2){
alert("you just have to select only two shoes.");
$(this).prop('checked', false);
return false;
}
$('#column1').text(shoes);
$('#column2').text(shoes);
//
});
In this case, how could i improve my code to reach the correct result? As a practical example, i I made a draft on JSFidle: https://jsfiddle.net/kg51Lvzx/

To do what you require I would suggest using checkboxes instead of radio controls. This allows the user to deselect an option.
From there you can loop through the selected items to output their text in the relevant divs.
Also, a couple of notes on the HTML. Firstly, I changed the repeated elements to use the same classes instead of incremental ids, as it makes selection much easier. Secondly, the label elements now wrap the relevant content. This means that the checkbox control and the image are clickable to make the selection.
let $output = $('.output');
let updateSelections = () => {
$output.text('');
$products.filter(':checked').each((i, el) => {
$output.eq(i).text(el.value);
});
}
let $products = $('.product').change(function() {
if ($products.filter(':checked').length > 2) {
$(this).prop('checked', false);
alert("you just have to select only two shoes.");
} else {
updateSelections();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" />
<h2 class="mb-3">Products - shoes</h2>
<div class="row justify-content-center">
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/cde9362a09ba4dd38c9ead6600ac074e_9366/Tenis_Duramo_SL_2.0_Preto_GW8336_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product1" id="1" value="Black shoes">
</div>
</label>
</div>
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7ed0855435194229a525aad6009a0497_9366/Tenis_Superstar_Branco_EG4958_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product2" id="2" value="White shoes">
</div>
</label>
</div>
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/9326e8db8d8e4e509e42ad26010cf693_9366/Tenis_adidas_4DFWD_Pulse_Preto_Q46451_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product3" id="3" value="Green shoes">
</div>
</label>
</div>
<div class="col-2 ms-2">
<label class="form-check-label">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/7a80a0e74201457eb1e5adcb00ff92f8_9366/Tenis_Dropset_Trainer_Azul_GZ2941_01_standard.jpg" width="100px" />
<div>
<input class="form-check-input product" type="checkbox" name="product4" id="4" value="Blue shoes">
</div>
</label>
</div>
</div>
<div class="output" id="column1"></div>
<div class="output" id="column2"></div>

Disable/Enable a text box based on radio/select option selected Javascript

I am trying to disable an input field in HTML if a radio button has a particular value. I have used Javascript functions for the same.
CODE SNIPPET 1 : (HTML RADIO BUTTON)
<div class="element-radio">
<label class="title">Children</label>
<div class="column column2">
<label>
<input type="radio" name="children" value="Yes" onChange="findselected()"/>
<span>Yes</span>
</label>
</div>
<span class="clearfix"></span>
<div class="column column2">
<label>
<input type="radio" name="children" value="No" checked="checked" onChange="findselected()"/>
<span>No</span>
</label>
</div>
<span class="clearfix"></span>
</div>
<div class="element-number">
<label class="title">No of children</label>
<div class="item-cont">
<input class="large" type="text" min="0" max="100" name="no_children" placeholder="If YES, Number of Children?" value="<?php echo $no_children?>" />
<span class="icon-place"></span>
</div>
</div>
CODE SNIPPET 2 : (JAVASCRIPT FUNCTION)
<script type="text/javascript">
function findselected() {
if (document.form.children.value == 'No') {
document.form.no_children.disabled=true;
// return false; // not sure this line is needed
} else {
document.form.no_children.disabled=false;
// return false; // not sure this line is needed
}
}
</script>
This does not work in the required way. Is there a better way to go about doing the same? I'm fairly new to Javascript so I wouldn't be able to implement a complicated code.

Update your script with the following code:
function findselected() {
var result = document.querySelector('input[name="children"]:checked').value;
if(result=="Yes"){
document.getElementById("inputtext").setAttribute('disabled', true);
}
else{
document.getElementById("inputtext").removeAttribute('disabled');
}
}
And add id attribute in your input control as id="inputtext".
<input id="inputtext" class="large" type="text" min="0" max="100" name="no_children" placeholder="If YES, Number of Children?" value="<?php echo $no_children?>" />

finding last child div in nested fieldset

Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks

function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).

Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/

I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.

js jquery searching and leaving visible when typing name

I have this code in my html:
<form>
<div style="width:530px; height:220px; overflow-y:scroll;">
<div class="people">
<label class="checkbox_1" for="1">
<img src="1.jpg" />
<span>
Jolly Bob Monumir
</span>
</label>
<input type="checkbox" name="people[]" value="1" id="1" />
</div>
<div class="people">
<label class="checkbox_1" for="2">
<img src="2.jpg" />
<span>
Jonathan Monumir
</span>
</label>
<input type="checkbox" name="people[]" value="2" id="4" />
</div>
<div class="people">
<label class="checkbox_1" for="3">
<img src="3.jpg" />
<span>
Misoury Crow
</span>
</label>
<input type="checkbox" name="people[]" value="3" id="3" />
</div>
<div class="people">
<label class="checkbox_1" for="4">
<img src="4.jpg" />
<span>
Michael Crow
</span>
</label>
<input type="checkbox" name="people[]" value="4" class="checkbox_1" id="4" />
</div>
</div>
</form>
After page loads whole form should be displayed. Now I would like to have inputbox and when I type in this box letters names of people it should automatically leave visible those names (divs with classes "people") which contain letters I type.
Example: I type "Jo", divs with Jolly Bob Monumir and Jonathan Monumir should be displayed and other should stay hidden. Then when I type "Cro", Misoury Crow and Michael Crow should be visible., etc. How can I do this with jquery? thanks in advance
UPDATE:
I found this and it works like a charm!
$('#search-criteria').on('keyup', function(){
$('div.people').hide();
var txt = $('#search-criteria').val();
$('div.people').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
});

I think you are looking for something like autocomplete of jqueryui.

I added a input field where you type:
<input type="text" id="people_name">
and jQuery code is:
$('input#people_name').on('keyup', function() {
var value = this.value.trim();
if(value.length) {
$('div.people span').filter(function() {
return new RegExp(value, 'i').test($(this).text());
}).closest('div.people').show();
} else $('div.people').hide();
});
DEMO
NOTE: You may use any autocomplete plugin.

UPDATE:
I found this and it works like a charm!
$('#search-criteria').on('keyup', function(){
$('div.people').hide();
var txt = $('#search-criteria').val();
$('div.people').each(function(){
if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1){
$(this).show();
}
});
});

jquery set previous div class

I have some jQuery that sets an image as a radio button for a star rating system. I wish to include a function that when the user cicks a radio button the image changes to checked and the previous radios are also change to checked.
I have managed to change the class of the checked button and I have some code that would change the class on the previous buttons also, but on a simpler div structure. I have been able to combine the both.
The code to change the class for the radio button
$(function() {
$('input:radio').each(function() {
$(this).hide();
$('<a title=" check me " class="radio-fx '+this.name+'" href="#"><div class="radio"></div></a>').insertAfter(this);
});
$('.radio-fx').live('click',function(e) {
e.preventDefault();
$check = $(this).prev('input');
var unique = '.'+this.className.split(' ')[1]+' div';
$(unique).attr('class', 'radio');
$(this).find('div').attr('class', 'radio-checked');
$check.attr('checked', true);
});
});
html:
<div class="voteGroup">
<input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio-checked"></div>
</a>
<input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
</div>
Code that I tried to integrate to set previous ones to checked on hover:
$('.radio-fx').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('radio-checked');
$(this).nextAll().removeClass('radio');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('radio');
}
);
Thanks for any help.

<div class="voteGroup">
<input type="radio" id="price_0" value="1" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_1" value="2" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
<input type="radio" id="price_2" value="3" name="price" style="display: none;" checked="checked">
<a href="#" class="radio-fx price" title=" check me ">
<div class="radio"></div>
</a>
</div>
<style type="text/css">
.radio-fx { float:left;margin:10px;}
.radio-fx .radio{ background:#ff0; width:20px; height:20px;}
.radio-checked .radio{ background:#f0f;}
</style>
<script type="text/javascript" src="../share/libs/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function() {
$('.radio-fx').live( "mouseenter", function() { // Handles the mouseover
var $self = $(this);
$self.addClass('radio-checked').prevAll().addClass('radio-checked');
$self.nextAll().removeClass('radio-checked');
}).live ( "mouseout", function() { // Handles the mouseout
$(this).removeClass('radio').prevAll().removeClass('radio'); // what is this for?
});
});
</script>
complete test code here, have a try