I have written a code that is working on a local server but online it is not working, Following shows the Code.
$(".super").each(function() {
var sup = "First Checkbox,Third Checkbox,Fourth Checkbox";
var array = sup.split(",");
$.each(array, function(i) {
$("input[type=checkbox][value='" + array[i] + "']").prop('checked', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td width="150">
<label>First Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="First Checkbox">
</td>
<td width="180">
<label>Second Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Second Checkbox">
</td>
<td width="150">
<label>Third Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Third Checkbox">
</td>
<td width="130">
<label>Fourth Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Fourth Checkbox">
</td>
</tr>
</table>
The above code shows multiple values are separated by commas and I need to get each value and enable the checkbox but It is working on local xampp but online on the server not working.
There's a few issues in your logic.
super is a reserved keyword in ECMA2015. You will need to rename that variable
The type and value attribute selectors need to be separated; ie. add the missing ]
You cannot have div elements as children of tr. Remove them.
You've repeated the same txtSup id attribute when they must be unique. Remove that attribute, you can change it to a class if needed.
$(".super").each(function() {
var sup = "First Checkbox,Third Checkbox,Fourth Checkbox";
var array = sup.split(",");
$.each(array, function(i) {
$("input[type=checkbox][value='" + array[i] + "']").prop('checked', true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
<tr>
<td width="150">
<label>First Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="First Checkbox">
</td>
<td width="180">
<label>Second Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Second Checkbox">
</td>
<td width="150">
<label>Third Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Third Checkbox">
</td>
<td width="130">
<label>Fourth Checkbox</label>
</td>
<td class="super">
<input type="checkbox" name="txtSup" value="Fourth Checkbox">
</td>
</tr>
</table>
Given the first two issues I don't see how your code works at all, regardless of server.
Related
I would like to know how to show the students who doesn't have a class and hide the rest(where td Class-name is empty) using only jquery or js.
I look in documentation but I got lost. so if you can help plz.
Ex: my table in this picture
my table is generated by django but there is the html
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
thanks in advance.
you have to loop on tr then get td inside it and then hide tr of that td which is null using jquery.
here is the jquery code for checking each tr loop through
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
and this code is used to hide empty td which don't have class.
if (nonEmpty.length != 0) $(this).hide();
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("tr").each(function() {
var nonEmpty = $(this).find("td.Class-name").filter(function() {
return $(this).text().trim() != ""; //check the trimmed TD content - will make it ignore all white space
});
if (nonEmpty.length != 0) $(this).hide();
});
});
</script>
</head>
<body>
<div class="button-select" id="add-student">Show Student with no Class</div>
<table class="table" id="student_table">
<tbody>
<tr class="clickable_student" style="">
<td>Student
<label for="id_students_34">
<input type="checkbox" name="students" value="34" class="displaynone">
</label>
</td>
<td class="Class-name">
Class23
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student2
<label for="id_students_38">
<input type="checkbox" name="students" value="38" class="displaynone">
</label>
</td>
<td class="Class-name">
Class17
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student3
<label for="id_students_39">
<input type="checkbox" name="students" value="39" class="displaynone">
</label>
</td>
<td class="Class-name">
Class19
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student4
<label for="id_students_40">
<input type="checkbox" name="students" value="40" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student5
<label for="id_students_41">
<input type="checkbox" name="students" value="41" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student6
<label for="id_students_42">
<input type="checkbox" name="students" value="42" class="displaynone">
</label>
</td>
<td class="Class-name">
</td>
</tr>
<tr class="clickable_student" style="">
<td>Student7
<label for="id_students_43">
<input type="checkbox" name="students" value="43" class="displaynone">
</label>
</td>
<td class="Class-name">
Class18
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am having below form with helpIcon for every form element with description.
How we can show help when we are hover on help icon and mouseout using jquery?
I am quit new for jquery. so please can someone give simple implementation?
<table>
<tbody>
<tr><td>
Name:
</td>
<td>
<input type="text" name="name" class="dipika">
</td>
<td>
<img src="help.png" id="imgNamehelp">
</td>
<td><div id="divNamehelp" style="display: none;"> This is Full Name</div></td>
</tr>
<tr><td>
Color:
</td>
<td>
<input type="radio" value="red" name="Color" class="dipika"> Red
<input type="radio" value="yellow" name="Color" class="dipika"> Yellow
</td>
<td>
<img src="help.png" id="imgColorhelp">
</td>
<td><div id="divColorhelp" style="display: none;"> This is color choice</div></td>
</tr>
<tr><td>
Hobbies:
</td>
<td>
<input type="checkbox" value="cricket" name="cricket" class="dipika"> Cricket
<input type="checkbox" value="kabdi" name="kabdi" class="dipika"> Kabadi
</td>
<td>
<img src="help.png" id="imgHobbieshelp">
</td>
<td><div id="divHobbieshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
<tr><td>
Address:
</td>
<td>
<textarea class="dipika"></textarea>
</td>
<td>
<img src="help.png" id="imgAddresshelp">
</td>
<td><div id="divAddresshelp" style="display: none;"> This is Hobbies choice</div></td>
</tr>
</tbody>
</table>
Can anybody help with this issue? Thanks in advance.
$(document).ready(function(){
$('img[src="help.png"]').mouseover(function(){
$('#'+getDivId(this)).fadeIn(500);
}).mouseout(function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});
$(document).ready(function(){
$('img[src="help.png"]').hover(function(){
$('#'+getDivId(this)).fadeIn(500);
},function(){
$('#'+getDivId(this)).fadeOut(500);
});
function getDivId(helpId){
var helpId = $(helpId).attr('id');
return helpId.replace('img','div');
}
});
I use this script in a Website with jquery 1.7.
$('input:radio[name=article-info]:!checked').parent().parent().removeClass('highlight')
I move this script in a bootstrap template but the chrome console report me this error:
Uncaught Error: Syntax error, unrecognized expression: input:radio[name=article-info]:!checked
Bootstrap use a update version of jQuery .
What should I use syntax for this version?
The complete code:
// Select input radio button
$('input[type=radio][name=article-info]').change(function() {
$('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight');
$(this).parent().parent().addClass('highlight');
// Price
$price = $('label[for="'+ $(this).attr('id') +'"] .tr-price').text();
$('#price-total').text($price);
// Url btn
$new_url = $(this).parent().siblings('.format').children().children('input').val();
$('#btn-personalizar').attr("href", $new_url);
});
//Select tr
$(".data-click-tr").click(function(){
$(".data-click-tr").removeClass('highlight')
$(this).addClass('highlight').find('input:radio[name=article-info]').attr('checked', true);
$get_input_id = $(this).find('input:radio[name=article-info]').val();
// Precio
$price = $('label[for="'+ $get_input_id +'"] .tr-price').text();
$('#price-total').text($price);
// Url btn personalizar
$new_url = $(this).find('.format').children().children('input').val();
$('#btn-personalizar').attr("href", $new_url);
});
The HTML:
<table id="select-size">
<thead class="size-and-price">
<tr class="header-table">
<th colspan="2">Tamaño</th>
<th class="">Precio</th>
</tr>
</thead>
<tbody>
<tr class="data-click-tr highlight" data-click-tr="1426">
<td class="input">
<input id="1426" type="radio" name="article-info" value="1426" checked="checked">
</td>
<td class="format">
<label for="">720X1080 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-75x100/1426">
</label>
</td>
<td class="price">
<label for="1426">
<span class="tr-price"> 39 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="6685">
<td class="input">
<input id="6685" type="radio" name="article-info" value="6685">
</td>
<td class="format">
<label for="">950X1400 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-95x140/6685">
</label>
</td>
<td class="price">
<label for="6685">
<span class="tr-price"> 49 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="710">
<td class="input">
<input id="710" type="radio" name="article-info" value="710">
</td>
<td class="format">
<label for="">1200X1900 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-120x190/710">
</label>
</td>
<td class="price">
<label for="710">
<span class="tr-price"> 69 €</span>
</label>
</td>
</tr>
<tr class="data-click-tr" data-click-tr="2259">
<td class="input">
<input id="2259" type="radio" name="article-info" value="2259">
</td>
<td class="format">
<label for="">2400X1600 mm (ver ficha)
<input class="url-designs" type="hidden" value="//localhost:3000/modelos/manta-polar-160x240-queen/2259">
</label>
</td>
<td class="price">
<label for="2259">
<span class="tr-price"> 89 €</span>
</label>
</td>
</tr>
</tbody>
</table>
This is a Screenshot:
The ! operator cannot be used in the selectors.
You can use :not() selector to invert the selector.
$(':radio[name="article-info"]:not(:checked)')...
^^^^^^^^^^^^^^
The :not(:checked) part in the selector will select the radio buttons which are unchecked.
To add a negative control, you must use :not()
$('input:radio[name=article-info]:not(:checked)').parent().parent().removeClass('highlight')
I have some radio buttons in a table and I’ve set a value to them. When the user selects them and clicks the submit button, I want the sum of those values to show in another table.
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_1">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_1" id="a1_1_0">
<label for="a1_1_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_1" id="a1_1_1">
<label for="a1_1_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_1" id="a1_1_2">
<label for="a1_1_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_1" id="a1_1_3">
<label for="a1_1_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_1_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<span id="Label1">hows the weather ?</span>
</td>
</tr>
<tr>
<td>
<table id="a1_2">
<tbody>
<tr>
<td>
<input type="radio" value="1" name="a1_2" id="a1_1_0">
<label for="a1_2_0">perfect</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="a1_2" id="a1_1_1">
<label for="a1_2_1">good</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="3" name="a1_2" id="a1_1_2">
<label for="a1_2_2">not bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="4" name="a1_2" id="a1_1_3">
<label for="a1_2_3">bad</label>
</td>
</tr>
<tr>
<td>
<input type="radio" value="5" name="a1_1" id="a1_1_4">
<label for="a1_2_4">very bad</label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
To get the value of an element, you can set an id to the element, then reference the element by id.
ex.
<script>
function sumRadioInputs() {
var valueOfInput = document.getElementById("someElementId").value;
}
</script>
It is up to you to figure out how to chain all the inputs together
You can create a function that you'll call on click in that you can use
if (document.getElementById('a1_1_0').checked) {
value = document.getElementById('a1_1_0').value;
}
And so on for all the Radiobuttons
First you need to get the value of the checked radio buttons
The trick is to get it like this:
$("input[name='a1_1']:checked").val();
Code example
Afterwards you can do whatever you want with the values.
I hope this helps you.
<div id="select1" data="select">
<span>Select Option</span>
</div>
<div toggle="select1" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
<div id="select2" data="select">
<span>Select Option</span>
</div>
<div toggle="select2" style="display: none">
<table>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Bike" />
option 1
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="Car" />
option 2
</td>
</tr>
<tr>
<td valign="top" style="width: 165px">
<input type="checkbox" name="vehicle" value="dog" />
option 3
</td>
</tr>
</table>
</div>
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
$('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
})
})
</script>
i have done it open the div above event . how to set in that event to close the opened div . also need to close div while click out of div or any action apart from div
if i opened one div need to close another one how to done it ?
actual output
I think you can hide all elements with the attribute toggle except the one that has to be opened.
$(document).ready(function () {
$('[data="select"]').click(function () {
var selectdiv = $(this);
var el = $('[toggle="' + selectdiv.attr('id') + '"]').toggle(); ;
$('[toggle]').not(el).hide()
})
})
Demo: Fiddle