I have a div with divs inside with inputs and their labels like this:
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
When i hover one of labels with mouse, i want to select all next divs and all previous divs (for appliing some css to them). So i use this:
$( "input[name='appointment_rating']+label" )
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show hover element");
console.log($(this).parent().html());
console.log("now will show all nextAll elements");
console.log(h.html());
console.log("now will show all prevAll elements");
console.log(j.html());
console.log("_");
alert("now will show all next elements");
h.each(function() {
alert(h.html());
});
alert("now will show all prev elements");
j.each(function() {
alert(j.html());
});
})
.mouseleave(function() {
console.log("leaved");
});
So if a select label for input with value "3", i want to see in alerts html of elements 0,1,2 as next and 4,5 as previous. But i see only 2 and 4, so only one element is selected as next and only one as previous. By the way, for some reason they are shoen several times, not one. What is wrong? And here is the jsfiddle - https://jsfiddle.net/c81wbefg/
jQuery.html will only return the innerHTML of the first element in the collection of matched elements. To output all the elements, you can loop over the jQuery collection with jQuery.each.
$("input[name='appointment_rating']+label")
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show all next elements");
h.each(function() {
console.log($(this).html())
});
console.log("now will show all prev elements");
j.each(function() {
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
Related
I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.
I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include
i have my form structure as below :
Each required element as a parent class is_required
Child class has element specific class name like checkbox_required or radio_required etc
i want to loop on all for elements inside is_required class and then based on sub class do the required validation. My problem is i am not able to select the child class:
<div class="col-md-3">
<div class="form-group is_required">
<label>radio button</label><br>
<div class="radio_required">
<input type="radio" name="radio_button" value="1">1
<input type="radio" name="radio_button" value="2">2
<input type="radio" name="radio_button" value="3">3
</div>
</div>
</div>
<div class="form-group is_required">
<label>checkboxes</label><br>
<div class="checkbox_required">
<input type="checkbox" name="checkboxes[]" value="one">one
<input type="checkbox" name="checkboxes[]" value="two">two
<input type="checkbox" name="checkboxes[]" value="three">three
</div>
</div>
i am looping through all these elements as below
$(".is_required").each(function() {
var div = $(this)+" > div";// Not sure how will i get the div here need to get radio_required, checkboxe_required etc
})
can someone advise me how can i achieve that
Try using the following code
$(".is_required").each(function() {
var element = $(this);
//Loop all children elements of current element
$(element).children().each(function () {
if($(this).hasClass("checkbox_required")){
var checkboxElement = $(this);
console.log($(checkboxElement).attr("class"));
}
else if($(this).hasClass("radio_required")){
var radioElement = $(this);
console.log($(radioElement).attr("class"));
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group is_required">
<label>radio button</label><br>
<div class="radio_required">
<input type="radio" name="radio_button" value="1">1
<input type="radio" name="radio_button" value="2">2
<input type="radio" name="radio_button" value="3">3
</div>
</div>
</div>
<div class="form-group is_required">
<label>checkboxes</label><br>
<div class="checkbox_required">
<input type="checkbox" name="checkboxes[]" value="one">one
<input type="checkbox" name="checkboxes[]" value="two">two
<input type="checkbox" name="checkboxes[]" value="three">three
</div>
</div>
I currently have a bootstrap tab panel which consists of 3 tabs. Each tab has various number of checkboxes (I do not have control over this they are populated dynamically). What I am trying to achieve is to select the radio button with the id that matches my variable lets say 3. However, if the id does not match I always want to select the last check box.
This is what I have come up with so far.
var defaultSelection = 3;
if (defaultSelection) {
var radioOptions = document.querySelectorAll('[name="firstSet"], [name="secondSet"], [name="thirdSet"]');
for (var i = 0; i < radioOptions.length; i++)
{
if (radioOptions[i].id === defaultSelection)
{
document.querySelector("input[name=" + radioOptions[i].name + "][id=\'" + defaultSelection + "\']").checked = true;
} else {
//not entirly sure how to check the last item here in the particular tab
}
}
}
Markup looks like:
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="firstSet" id="1" value="1"> 1
</label>
<label class="radio-inline btn-sm">
<input type="radio" name="firstSet" id="2" value="2"> 2
</label>
<label class="radio-inline btn-sm radio-active">
<input type="radio" name="firstSet" id="3" value="3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="4" value="4"> 4
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="5" value="5"> 5
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="secondSet" id="25" value="25"> 25
</label>
<label class="radio-inline">
<input type="radio" name="secondSet" id="27" value="27"> 27
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="thirdSetSet" id="55" value="55"> 55
</label>
</div>
The above works to check the radio with the id which matches my variable but I'm not entirely sure how to select the last option in a particular tab if none are select or match my variable entry.
Any pointers would be helpful.
One way you could go about this is by keeping track of whether the default radio button has been found and checked, and if that's not the case, then just check the last radio button.
Here's an example that implements this solution:
var defaultSelection = 3;
if (defaultSelection) {
var firstSet = document.querySelectorAll('[name="firstSet"]');
var secondSet = document.querySelectorAll('[name="secondSet"]');
var thirdSet = document.querySelectorAll('[name="thirdSet"]');
var tabs = [].concat(firstSet, secondSet, thirdSet);
tabs.forEach(function(tab) {
// keep track of whether default has been checked and
// grab the last radio button from the tab
var isDefaultChecked = false;
var lastRadioButton = tab[tab.length - 1];
for (var i = 0; i < tab.length; i++) {
var radio = tab[i];
var isDefaultSelection = parseInt(radio.id, 10) === 3;
// check the default radio button and
// set `isDefaultChecked` to true
if (isDefaultSelection) {
radio.checked = true;
isDefaultChecked = true;
}
}
// if no radio button was checked,
// check the last radio button
if (!isDefaultChecked) {
lastRadioButton.checked = true;
}
});
}
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="firstSet" id="1" value="1" /> 1
</label>
<label class="radio-inline btn-sm">
<input type="radio" name="firstSet" id="2" value="2" /> 2
</label>
<label class="radio-inline btn-sm radio-active">
<input type="radio" name="firstSet" id="3" value="3" /> 3
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="4" value="4" /> 4
</label>
<label class="radio-inline">
<input type="radio" name="firstSet" id="5" value="5" /> 5
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="secondSet" id="25" value="25" /> 25
</label>
<label class="radio-inline">
<input type="radio" name="secondSet" id="27" value="27" /> 27
</label>
</div>
<div class="d-flex flex-wrap">
<label class="radio-inline">
<input type="radio" name="thirdSet" id="55" value="55" /> 55
</label>
</div>
I have a multiple radio elements and the options are integer. For each radios, I'm getting the default option to sum up the total.
Then, on change event, I would like to sum or subtract the total based on selected option.
In javascript, I'm able to get the total, but don't know how to sum and subtract values on change. Hereunder my current markup and script:-
var sum = 0;
var $this;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
});
$('.form-item input').on('change', function() {
// addition and subtraction here
});
$('.total').html(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
<strong>Question 1</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 2</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 3</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>
Just call the adding in the change event of the radio button
Initialize the total inside change event so that you can make the change every time you select and unselect.
Note: Added name for each set of radio button so you can unselect and the setting of total in total span.
$('.form-item input').on('change', function() {
// addition and subtraction here
var $this;
var sum = 0;
$('.form-item input').each(function() {
$this = $(this);
if ($this[0].checked == true) {
sum += parseInt($this.val());
}
$('.total span').html(sum);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="form-type-radio">
<strong>Question 1</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 2</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename1" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename1" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename1" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="form-type-radio">
<strong>Question 3</strong>
<div class="form-item">
<input type="radio" id="radio-1" name="samename2" value="1" class="form-radio" checked="checked">
<label class="option" for="radio-1">1</label>
</div>
<div class="form-item">
<input type="radio" id="radio-2" name="samename2" value="2" class="form-radio">
<label class="option" for="radio-2">2</label>
</div>
<div class="form-item">
<input type="radio" id="radio-3" name="samename2" value="3" class="form-radio">
<label class="option" for="radio-3">3</label>
</div>
</div>
<div class="total"><strong>Total:</strong><span>3</span></div>
I have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
http://jsfiddle.net/jz84u/2/
How can i check if minimum one group is checked in this example? If no then should be alert('error').
I would like use jQuery.
$(".group").each(function(){
})
but how can i check this? For my example should be return error - any input is checked, but if i have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4" checked="checked">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
for this example is ok - input in second group is checked.
How can i validate this?
Will this fit your needs?
var n = $(".group input:checked").length;
if(n>0){do something}
Try like below it will work...
Add a button
<input type="button" value="check" id="btnCheck">
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
write a jquery like below
$("#btnCheck").click(function() {
if($(".group input:radio:checked").val())
alert("checked");
else
alert("Nothing checked");
});
Fiddle : http://jsfiddle.net/jz84u/6/