This is the codes for radio box.
<div class="question-answer">
<label style="margin: 10px;">
<span class="kt-font-bolder">1</span>
<br>
<input name="2" type="radio" label="1" value="1">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">2</span>
<br>
<input name="2" type="radio" label="2" value="2">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">3</span>
<br>
<input name="2" type="radio" label="3" value="3">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">4</span>
<br>
<input name="2" type="radio" label="4" value="4">
</label>
<label style="margin: 10px;">
<span class="kt-font-bolder">5</span>
<br>
<input name="2" type="radio" label="5" value="5">
</label>
<br>
<span style="color: rgb(128, 0, 0);"></span>
</div>
There are almost 20 question in a page with same code. How can I check all 3 in radiobox with js code? Can anyone help me, please?
You could try document.querySelectorAll to find the elements you want by using a css selector like .question-answer input[type="radio"][value="3"]. Then you can iterate over that list and set the checked property to true.
const inputElementsWith3 = document.querySelectorAll('.question-answer input[type="radio"][value="3"]');
inputElementsWith3.forEach(function(radio) { radio.checked = true; });
Related
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>
I am trying to make the input text change when pressing on radio button
the form it self have 5 option with multiple radio buttons and input text
the input text that i am trying to change is in different form since also when changing the input text in the main form it should change it on the other one
i get this for now
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
but this change the input text in the current form
how can i make to change the second form input text
main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">
<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td></tr>
</tbody>
so for now if i press on radio button it change the input in the same form
i need to change the input text on the second form
for example i press on type p it change the first input text in the second form
thanks
Problem in your code:
find("input[type=text]").val(this.value); will give you all the input type=text, and update all of them with this.value, what you really want is to target the specific element, so should be something like .find("input[name=" + this.name + "][type=text]")
Solution:
Use .find("input[name=" + this.name + "][type=text]") to find the last element with name="xxxx" and type=text, this will return only one result since the combination is unique
The idea is to target the single input element you want to update, also you should clean up your code, attribute orders etc, remove id if you are not using it.
UPDATE: change input update radio button.
.find("input[type=radio][name=" + this.name + "][value=" + this.value + "]")
when update your text input, you can target the input where type=radio with same name and same value then use .prop("checked", true) to check it.
$(document).ready(function() {
$("input[type=radio]").click(function() {
$(this).closest('body').find("input[name=" + this.name + "][type=text]").val(this.value);
});
$("input[type=text]").on('input', function() {
$(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
});
//init
$("input[type=radio]:checked").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form
<div class="selector">
<div class="selector">
ccc
</div>
<p>
<label>
<input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
TYPE : p </label>
<br>
<label>
<input type="radio" name="selector1" value="K" id="selector1_1">
TYPE : l </label>
</p>
<div class="selector">j</div>
<p>
<label>
<input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
aaa</label>
<br>
<label>
<input type="radio" name="selector2" value="U" id="selector2_1">
u</label>
</p>
<input name="selector2hyphen" type="hidden" value="-">
<div class="selector">bbb</div>
<p>
<label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
inches. Please use 3 digit</label></p>
<input name="selector3hyphen" type="hidden" value="-">
<div class="selector-column-boxhead"> wd</div>
<p>
<label>
<input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
<br>
<label>
<input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
<br>
<label>
<input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
<br>
<label>
<input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
</p>
<div class="selector-column-boxhead">t Type</div>
<p>
<label>
<input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
<br>
<label>
<input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
<br>
<label>
<input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
<br>
<label>
<input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
<br>
<label>
<input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
<br>
<label>
<input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
</p>
<div class="selector-column-boxhead">acc</div>
<p>
<label>
<input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
<br>
<label>
<input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
<br>
<label>
<input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
<br>
<br>
</p>
<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
</p>
</div>
second form where input should change
<tbody>
<tr>
<th>Model </th>
<td style="width:100%;">
A<input name="selector1" type="text" value="_" maxlength="3">
<input name="selector2" type="text" value="_" maxlength="3">
<input name="selector3" type="text" value="000" maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_" maxlength="3">
<input name="selector6" type="text" value="_" maxlength="3">
</td>
</tr>
</tbody>
The form your changing the input is the first form,
select the next form by adding the next method after ( closest( form) )
Don't Forget form tags plus they have to be next to one another.
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').next() .find("input[type=text]").val(this.value);
});
});
$(this).closest() is used to find the closest parent element. It would only select the element that is the parent of $(this) element.
You should give the text inputs unique IDs so that they can be easily identified.
Change this-
<input name="selector1" type="text" value="_" maxlength="3">
To this-
<input name="selector1" id="selector1" type="text" value="_" maxlength="3">
And then in jquery,
$("input[type=radio]").click(function () {
$("#selector1").val(this.value);
});
Try this code
Add a common class to every radio button
$(document).ready(function() {
$('.class_name_of_radio').change(function() {
$("input[type=text][name="+this.name+"]").val(this.value);
});
});
Create a onchange function for all the radio button on all the forms. Pass the value of the radio button on the function and get the value from the function.
Eg:
Function myChange(myRadioVal)
{
$("#inputTextBoxId").val(myRadioVal);
//code here
}
$("#1").find("Radio1").prop('checked', true);
$("#2").find("Radio1").prop('checked', true);
<div id="1" cvalue='false'>
Are you a student ?
<br> <input type="radio" name="RadioB1" id="Radio1" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio2" value="2">
<label for="Radio2">No</label>
</div>
<br/>
<div id="2" cvalue='false' >
Do you study in a university ?
<br>
<input type="radio" name="RadioB1" id="Radio3" class="ui-state-default ui-corner-all" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio4" class="ui-state-default ui-corner-all" value="2">
<label for="Radio2">No</label>
</div>
DEMO
First of all name for both the radio class buttons should be kept different to as to select from both the divs.
Second you are finding label and setting its prop, rather you should find the input radio buttons as:
HTML:
<div id="1" cvalue='false'>
Are you a student ?
<br> <input type="radio" name="RadioB1" id="Radio1" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio2" value="2">
<label for="Radio2">No</label>
</div>
<br/>
<div id="2" cvalue='false' >
Do you study in a university ?
<br>
<input type="radio" name="RadioB1" id="Radio3" class="ui-state-default ui-corner-all" value="1">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio4" class="ui-state-default ui-corner-all" value="2">
<label for="Radio2">No</label>
</div>
JS:
$('#1').find('input[name=RadioB1]').filter('#Radio1').prop('checked', true);
$('#2').find('input[name=RadioB2]').filter('#Radio3').prop('checked', true);
See this demo
I'm wondering why you want to use javascript to do this? you can use pure html like this:
<div id="1" cvalue='false'>
Are you a student ?
<br> <input type="radio" name="RadioB2" id="Radio1" value="1" checked="checked">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB2" id="Radio2" value="2">
<label for="Radio2">No</label>
</div>
<br/>
<div id="2" cvalue='false' >
Do you study in a university ?
<br>
<input type="radio" name="RadioB1" id="Radio3" class="ui-state-default ui-corner-all" value="1" checked="checked">
<label for="Radio1">Yes</label><br>
<input type="radio" name="RadioB1" id="Radio4" class="ui-state-default ui-corner-all" value="2">
<label for="Radio2">No</label>
</div>
Note: All you need is to use checked="checked" and use different name to choose multiple for each question.
On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four columns):
HTML code
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer" ng-model="question.response.value" ng-options="a.text as a.getText() for a in question.answers.items" id="Language.PrimarySpoken" ng-value="a.text" class="input-wide " ng-class="{error:hasError()}" ng-change="selectAnswer()">
<option class="hidden" disabled="disabled" value=""></option>
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
</select>
<label class="question-name" ng-class="{error:hasError()}"> <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Additional Complaint </span> <span class="icon-required" ng-show="question.required"></span> </label>
<div class="form-row added ng-binding content" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding" ng-bind-html="question.getText()"><em><a class='inline' href="#inline_content">+ Add/Edit</a></em></div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<div class="added">
<div class="column-left">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
One
</label>
<br/>
<label class="checkbox" for="checkbox2" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
Two
</label>
<br/>
</div>
<div class="column-center">
<label class="checkbox" for="checkbox3" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
Three
</label>
<br/>
<label class="checkbox" for="checkbox4" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Four
</label>
<br/>
</div>
<div class="column-center-right">
<label class="checkbox" for="checkbox5" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
Five
</label>
<br/>
<label class="checkbox" for="checkbox6" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
Six
</label>
<br/>
</div>
<div class="column-right">
<label class="checkbox" for="checkbox7" style="font-size:20px;">
<input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
Seven
</label>
<br/>
<label class="checkbox" for="checkbox8" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
Eight
</label>
<br/>
</div>
</div>
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" value="Update">
<input type="submit" name="cancel" id="cancel" class="button button-orange" style="width: 90px; background-color:#36606e;" value="Cancel">
</form>
</div>
</div>
JS code
$(document).ready(function(){
$(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});
//array to store checkbox values
checkValues = new Array();
document.getElementById('update').onclick = function(){
//capture all text in a variable
var textStr = $('<ul></ul>');
//iterate all checkbox values to create ul
$.each(checkValues, function( index, value ){
textStr.append('<li>'+value+'</li>');
});
//add text
$("#text").html(textStr);
parent.$.colorbox.close();
return false;
};
//add change handler for checkbox
$('input:checkbox[name=complaint]').change(function(){
value = $(this).val();
if(this.checked)
checkValues.push(value);
else
{ //Removing by value
checkValues = $.grep(checkValues, function(n, i) {
return n !== value;
});
}
});
document.getElementById('cancel').onclick = function(){
parent.$.colorbox.close();
return false;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.
I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it helpful, working fiddle
JAVASCRIPT
function selectAnswer(sel){
var a= document.querySelectorAll('label');
console.log(this.value);
for(i=0;i<a.length;i++){
a[i].style.display='inline'
}
document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}
while i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.
<div style="display:none">
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
One
</label>
</div>
<div >
<label class="checkbox" for="checkbox1" style="font-size:20px;">
<input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
Two
</label>
<br/>
</div>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work
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/