I have a set of four radio buttons that represent four different conditions (Good, Improving, Worsening, Poor). Selecting "worsening" or "poor" should unhide a table row with a textarea to explain why the condition is not good. Selecting "good" or "improving" should hide the table row. I've tried adding a class to the two that unhide the table row, but only one of the buttons is working (worsening). I have a feeling I need an or clause in there somewhere to pickup both buttons, but I've tried many variations and I'm just not coming up with it. Appreciate any help for this noob.
Here is what I have:
<tr>
<td>
Customer Sentiment:
</td>
<td colspan="3">
<div id="sentiment">
<input class="xhide" type="radio" id="Good" value="1" name="sentimentID" <cfif sentimentID eq 1>checked</cfif> /><label for="Good">Good</label>
<input class="xhide" type="radio" id="Improving" value="2" name="sentimentID" <cfif sentimentID eq 2>checked</cfif> /><label for="Improving">Improving</label>
<input class="xshow" type="radio" id="Worsening" value="3" name="sentimentID" <cfif sentimentID eq 3>checked</cfif> /><label for="Worsening">Worsening</label>
<input class="xshow" type="radio" id="Poor" value="4" name="sentimentID" <cfif sentimentID eq 4>checked</cfif> /><label for="Poor">Poor</label>
</div>
</td>
</tr>
<tr class="rnotes"">
<td valign="top">Sentiment Notes:</td>
<td colspan="3">
<cfoutput>
<textarea name="sentimentNotes"
cols="100"
rows="4">#sentimentNotes#</textarea>
</cfoutput>
</td>
</tr>
Script:
$(document).ready(function()
{
$(".rnotes").hide();
$(':radio').change(function(){
var isChecked=$('.xshow').prop('checked');
$('.rnotes').toggle(isChecked);
});
});
========================================================================
Here is the script:
$(document).ready(function()
{
$(".rnotes").hide();
$('input[type=radio]').change(function(){
var isChecked = $(this).prop('checked');
var isShow = $(this).hasClass('xshow');
$(".rnotes").toggle(isChecked && isShow);
});
});
Working fiddle: http://jsfiddle.net/LnyJZ/5/
Related
I have a web page with multiple checkboxes and the relative input values
with the following code:
<tr><td><input type=\"checkbox\" id=\"second_checkbox\" name=\"second_checkbox\" value=\"" + Sample_ID + "\"><label for=\""+ Sample_ID + "\">"+ Sample_ID +"</label><br></td><td><select name=\"option\" id=\"option\"><option value=\"\" selected=\"selected\"></option><option value=\"=\">=</option><option value=\"!=\">!=</option><option value=\">\">></option><option value=\">=\">>=</option><option value=\"<\"><</option><option value=\"<=\"><=</option><option value=\"ilike\">contains</option></select></td><td><input type=\"text\" name=\"valore\" placeholder=\"value\"></td></tr>"
and I get the different values by using this functions:
filtri = request.form.getlist('second_checkbox')
simbolo = request.form.getlist('option')
valori = request.form.getlist('valore')
but the array "valori" takes all the empty values on the page and I want to take only the ones that are checked on the first checkbox.
How can I do that?
Thanks
First, remove the duplicate id's and names in the html. An id in html should be unique. Using the right selection mechanism you don't need them either.
For the client side (so, within the browser) you can select all checked checkboxes using the selector [type=checkbox]:checked. Here's a minimal reproducable example.
document.addEventListener(`click`, evt => {
console.clear();
const allChecked = document.querySelectorAll(`[type='checkbox']:checked`);
// ^ only checked
if (allChecked.length) {
return allChecked
.forEach(cb => {
const theRow = cb.closest(`tr`);
console.log(`checked row (#${theRow.rowIndex + 1}) text input value: ${
theRow.querySelector(`input[type='text']`).value || `no value`}`);
});
}
return console.log(`none checked (yet)`);
});
<table>
<tr>
<td>
<input type="checkbox" value="123"> 123
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="456"> 456
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 2">
</td>
</tr>
<tr>
<td><input type="checkbox" value="789"> 789
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 3">
</td>
</tr>
</table>
I have the following HTML structure -
<div class="first_checkbox">
<input type="checkbox" name="checkbox" class="all-checkbox" value="">
</div>
<table>
<tr>
<td>
<input type="checkbox" name="checkbox-32" id="checkbox-32" value="" style="opacity: 0;" />
</td>
<td class="h_pincode">380059</td>
<td class="b_add2">Nr. Swatik Cross Road, Navrangpura</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox-34" id="checkbox-34" value="" style="opacity: 0;" />
</td>
<td class="h_pincode">380015</td>
</tr>
</table>
The functionality, I want to achieve is, when I click on the first radio box, all the subsequent checkbox in s be checked.
The JS to do that is as follows -
$(function(){
$(".all-checkbox").on("click", function(){
$('input[type=checkbox]').each(function(ind, val){
$(this).prop('checked', 'checked');
console.log(this.name + ' ' + this.value + ' ' + this.checked);
});
});
});
I am getting the console logs correctly, only difference being, the radio boxes does not get checked.
The fiddle is located here - http://jsfiddle.net/dAJM8/
check jsFiddle
JQuery
$("#checkbox-all").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
I have a table with a radio button per row.
<table id="t1">
<tr><td><input type="radio" onclick="grab_row()" value=1></td><td>Data1<td>Data11</td></tr>
<tr><td><input type="radio" onclick="grab_row()" value=2></td><td>Data2<td>Data22</td></tr></table>
I would like to have a function that grabs the values of the row selected via radio.
my function:
function grab_row () {
var radio = $("input[name=t1]:checked").val();
}
The function only grabs the radio id that is currently selected.
for example, if the first radio is clicked, Data1 and Data11 are returned.
Thanks
Here's my interpretation of what you're looking for
html
<table>
<tr>
<td>
<input type="radio" value="1" name="myradio" />
</td>
<td>Data1</td>
<td>Data11</td>
</tr>
<tr>
<td>
<input type="radio" value="2" name="myradio" />
</td>
<td>Data2</td>
<td>Data22</td>
<td>Data222</td>
</tr>
js
$("input:radio[name=myradio]").click(function () {
var myvals = [];
var elem = $(this).parent().next();
while (elem.prop("tagName") == "TD") {
myvals.push(parseInt(elem.html().substring(4)));
elem = elem.next();
}
console.log(myvals);
});
I assumed that you just need the integers after the "Data" string, but you can grab the entire content of the TD element with just the .html() and leaving out the .substring(4)
fiddle
When you use .val() when using a selector that returns multiple elements, it will only return the value of the first element. Instead, you need to iterate through them using .each().
var values = [];
$("input[name=t1]:checked").each(function(idx, val) {
//spin through and collect each val
values.push($(val).val());
})
console.log(values); //view values in console
This should be your jQuery:
$("input[type=radio]").click(function () {
console.log($(this).val());
});
and this should be your HTML:
<table id="t1">
<tr>
<td>
<input type="radio" name="foo" value="1" />
</td>
<td>Data1</td>
<td>Data11</td>
</tr>
<tr>
<td>
<input type="radio" name="foo" value="2" />
</td>
<td>Data2</td>
<td>Data22</td>
</tr>
</table>
jsFiddle example
Note that you can also use $("input[name=foo]") instead of $("input[type=radio]").
All I want is filter the table with radio inputs.
This is my jsfiddle
I am using this inputs and table:
<div style="border:1px solid;">
<input type="radio" id="Bob" name="name" />Bob
<input type="radio" id="Jay" name="name" />Jay
</div>
<div style="border:1px solid; margin:5px 0;">
<input type="radio" id="developer" name="position" />Developer
<input type="radio" id="itManager" name="position" />Manager
</div>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Position</th>
</tr>
<tr>
<td>Bob</td><td>Developer</td>
</tr>
<tr>
<td>Jay</td><td>Manager</td>
</tr>
<tr>
<td>Bob</td><td>Manager</td>
</tr>
<tr>
<td>Jay</td><td>Developer</td>
</tr>
</table>
and this js:
$('#Bob').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Bob"))').hide();
});
$('#Jay').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Jay"))').hide();
});
$('#developer').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Developer"))').hide();
});
$('#itManager').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Manager"))').hide();
});
All I need is double filter, when I select Bob, its shows only bobs than when I select Developer I want to see Bob - Developer tr.
I know js code is wrong but I wanted you make understand what I want to do.
Try this, more simple:
$('input[type="radio"]').change(function () {
var name = $('input[name="name"]:checked').prop('id') || '';
var position = $('input[name="position"]:checked').prop('id') || '';
$('tr').hide();
$('tr:contains(' + name + ')').show();
$('tr').not(':contains(' + position + ')').hide();
});
Demo here
The only change in the HTML you need is to have the ID of the position radio buttons to be the same as the table. The that information can be used in the tr show/hide. Like:
<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager
I have a form that uses checkboxes similar to the one below
<Form>
<table>
<tr>
<td align="left" width="15"><input name="switch" title="0" id="radio17" value="Free Shipping" checked="checked" type="radio" />
</td>
<td>Free Shipping</td>
</tr>
<tr>
<td align="left" width="15"><input name="switch" title="38" id="radio18" value="Standard Shipping" type="radio" />
</td>
<td>Standard Shipping
</td>
</tr>
</table>
and what i need is the difference in price, which is denoted by the title, to be displayed next to the name.So if Free Shipping is selected the output should look like "Free Shipping [+0]" and Standard shipping will look like "Standard Shipping [+38]"
I am just learning javascript, so that would be prefered, but anything will do if it works.
Do you mean something like this?
<form>
<label><input type="radio" name="switch" title="Free Shipping" id="freeshipping" value="0" checked="checked" type="radio" />Free Shipping</label>
<label><input type="radio" name="switch" title="Standard Shipping" id="standardshipping" value="38" />Standard Shipping</label>
<div>Selected shipping method: <span id="shippingtitle"> </span> [+<span id="shippingcost"> </span>]</div>
</form>
window.onload = function(){
var i;
for(i = 0; i < document.getElementsByName('switch').length; ++i){
document.getElementsByName('switch')[i].onclick = function(){
document.getElementById('shippingtitle').firstChild.data = this.title;
document.getElementById('shippingcost').firstChild.data = this.value;
}
}
};
label{
display:block;
float:left;
clear:left;
width:30%;
}
form{
max-width:500px;
}
It seems that you're just learning JavaScript. That's great, but don't use a helicopter if you're trying to steer a car (learn basic JavaScript and read a little bit about the DOM before you use jQuery).
I would access the radio elements by id and then update their parent element's sibling element's text to include the value of the "title" attribute of the radio button. For example:
function showPriceDifference(id) {
var el = document.getElementById(id)
, price = el.getAttribute('title');
el.parentElement.nextElementSibling.innerHTML += ' [+' + price + ']';
}
showPriceDifference('radio17');
showPriceDifference('radio18');