Been using this site for ages and have never had to go as far as to ask my own question... cheers in advance.
I have a group of "questions" which are to be listed. The user then has to rank these questions as 1st, 2nd, and 3rd (there can be many more than three questions however).
The problem I have is that, if I make the radio button mutually exclusive in one direction - the user could rank all questions as #2, however if I make them mutually exclusive in the other direction, a user could rank the same question as #1, #2, AND #3.
Is there a way (maybe using jquery/Jscript) to make the radio buttons mutually exclusive in both directions?
EXAMPLE:
<table>
<tr>
<th>Question</th><th>Rank #1</th><th>Rank #2</th><th>Rank #3</th>
</tr><tr>
<td>QUESTION 1</td>
<td><input type="radio" name="rank1" value="1" id="1_1" /></td>
<td><input type="radio" name="rank2" value="1" id="1_2" /></td>
<td><input type="radio" name="rank3" value="1" id="1_3" /></td>
</tr><tr>
<td>QUESTION 2</td>
<td><input type="radio" name="rank1" value="3" id="3_1" /></td>
<td><input type="radio" name="rank2" value="3" id="3_2" /></td>
<td><input type="radio" name="rank3" value="3" id="3_3" /></td>
</tr>
In the above example, the value is the question's ID (from the DB)
Creative solution:
Why don't you use a widget?
you could put questions like layers you can drag and move, example:
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/draggable/#sortable
The first to appear would be the first one.
You would have to use jQuery to get this effect working as I can't see a way of it working out of the box with HTML. Here is an example the gives the desired effect:
$(document).ready(function() {
$(':radio').click(function() {
$(this).parent().siblings().children(':radio').attr('checked', false);
});
});
Related
I have literally no experience. I'm a paramedic, and I have to fill out hundreds of patients forms using a redundant form with many superfluous fields.
I am trying to write a script to prefill some of the fields that stay the same for most patients, for example, "age units." Almost all of our patient's ages are in "years" but the software fields listed include "minutes, hours, days, weeks, months, years, cancel the selection, etc." The field is required for completion of a report, yet the default is set to "cancel selection", which will prevent completion of the report.
I have attached the code as it is. I literally had to google what (language?) this was even written in. First, I figured that I could inspect the default element, inspect the desired element, and just modify the values so that the desired element was checked. Then, I tried to use an autofill extension that allowed me to select a form field and modify the value. I tried to modify it as a checkbox/radio. I tried to use javascript. I yelled. I have been wildly unsuccessful. If someone could point me in the right direction, I'd be eternally grateful. I don't even know what I'm trying to modify. Is it a radio/checkbox? Is it a button? Is it text?
I have tried as much as my feeble brain is capable of.
This is what one of the offending elements of the form looks like.
<div class="radio_checkbox_div_container">
<table class="table_radio">
<tbody>
<tr>
<td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" checked=""> Cancel Selection </td>
<td colspan="2"> </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_0" value="2516001"> Days </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_1" value="2516003"> Hours </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_2" value="2516005"> Minutes </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_3" value="2516007"> Months </td>
<td class="td_radio td_3col"><input type="radio" class="reg_option" name="ePatient_16" id="ePatient_16_4" value="2516009"> Years </td>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_5" value="7701001"> Not Applicable </td>
</tr>
<tr>
<td class="td_radio td_3col"><input type="radio" class="nil_option" name="ePatient_16" id="ePatient_16_6" value="7701003"> Not Recorded </td>
</tr>
</tbody>
</table>
</div>
I want to modify some form fields (all similar to above) so that my most used selections are the default values.
He Hi Hello,
I create one jsfiddle for you, just copy paste html tags and replace ids in script to select radio buttons and other elements
this will give you basic idea
https://jsfiddle.net/1efx59vn/
<div class="radio_checkbox_div_container"><table class="table_radio"><tbody><tr><td class="td_radio ui-state-highlight"><input type="radio" name="ePatient_16" id="ePatient_16_cancel" value="" > Cancel Selection </td><td colspan="2"> </td></tr>
<script>
$('#ePatient_16_cancel').attr('checked', 'true')
</script>
As i can see, you are new, have no knowledge about javascript, so this will be tough for you to understand. But try to understand just few things like in this script tag $('#ePatient_16_cancel').attr('checked', 'true') _ePatient_16_cancel_ is an id of radio button, id means your unique account number, that no one will have, find ids for other elemets too and put inside $('#') replace with element ID.
So the script will look like this
$('#ePatient_16_cancel').attr('checked', 'true')
open form in chrome browser and press F12 key, navigate to console tab and paste the script in console then press enter, this will select radio button for you
I trying use pictures in radio button. But problem is when i running on IE9 it work fine but on IE 11 not. On my jQuery scripts i hide all radio buttons and for actions i using label's. On IE9 i can click on the picture (anywhere) and it is fine. But on IE11 i need click only on left bottom corner.
<div id="div_name">
<table class="tables">
<tr>
<td><input type="radio" name="name"[] id="H1" value="H1" class="me_radio"><label for="H1" class="radio_label"><img src="icons/1.gif"><br>One</label></td>
<td><input type="radio" name="name"[] id="H2" value="H2" class="me_radio"><label for="H2" class="radio_label"><img src="icons/2.gif"><br>Two </label></td>
<td><input type="radio" name="name"[] id="H3" value="H3" class="me_radio"><label for="H3" class="radio_label"><img src="icons/3.gif"><br>Three</label></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
$('#me_radio label').click(function() {
$('#other_div label').removeClass('selected');
.
.// remove classes from another
.
$(this).addClass('selected').siblings().removeClass('selected');
});
And CSS
.selected {
background-color: #ccc;
}
Might be kind of late for this, but the workaround I have been using is
<meta http-equiv="x-ua-compatible" content="IE=10">
You might have already solved this issue, but hope you found another way for it work.
Assume that, there are many checkboxes in any site and they are unchecked. Site works in any server. I have not site code. I want to make checked some of those checkboxes. To find checkboxes by value of <td> Can I do this with JavaScript? How can I run JavaScript code in that site code? My aim is to show checkboxes as "checked".
<tr>
<td id ="id1" name"name1">value1</td>
<td><input id="checkid1" name="checkname1" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id2" name"name2">value2</td>
<td><input id="checkid2" name="checkname2" type="checkbox" value="false"></td>
</tr>
<tr>
<td id ="id3" name"name3">value3</td>
<td><input id="checkid3" name="checkname3" type="checkbox" value="false"></td>
</tr>
If it is possible, I want to enter, value1, value2 and JavaScript will make checked related checkboxes.
You can achieve this with JQuery.
Check if a checkbox is checked and than set checked true for the desired other checkboxes.
http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html
To search by value you can do something like this:
$("input:checkbox[value=val]").attr("checked", true);
I am working with a SharePoint site and I cannot change the HTML. What I am trying to do is to get which radio button is selected but they are wrapped in span's. If I go by title on the span and then .next() I get the next element after the span which is incorrect so how should I do this?
HTML:
<span dir="none"><table cellpadding="0" cellspacing="1">
<tr>
<td><span class="ms-RadioText" title="Tasmania"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl00" /><label for="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00">Tasmania</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Greenland"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl01" /><label for="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl01">Greenland</label></span></td>
</tr><tr>
<td><span class="ms-RadioText" title="Hawaii"><input id="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02" type="radio" name="ctl00$m$g_f1c8ac33_8a36_42be_8901_5201d5b9eede$ctl00$ctl04$ctl02$ctl00$ctl00$ctl04$ctl00$RadioButtons" value="ctl02" /><label for="ctl00_m_g_f1c8ac33_8a36_42be_8901_5201d5b9eede_ctl00_ctl04_ctl02_ctl00_ctl00_ctl04_ctl00_ctl02">Hawaii</label></span></td>
</tr>
</table></span>
I am trying to not use the name of the radio button group as this can change.
Thanks in advance.
$('span > input:radio:checked')
This will select all input elements, which are checked, and are direct child of span elements.
Demo
If you want the selected radio buttons:
$(".ms-RadioText input:radio:checked")
$(".ms-RadioText > input[type='radio']:checked").val();
Like this for example:
$("span.ms-RadioText input[type=radio]:checked") // returns list of all inputs that are children of spans.
$("span.ms-RadioText input[type='radio']:checked").value('this one is selected');
As I have generated HTML Table (Asp.net Table),
now I need the value of the Cell One when that respective checkBox is checked.
Suppose the second check box is clicked I need the value of the second row
E.g. if month 2 is clicked I need the value 553.5000
USING JAVA SCRIPT.
As well as the total of the same..
Total of the check value..
<table border="2" id="ctl00_ctl00_B_A_ucStudentRegistration1_TblTotalPay">
<tbody><tr>
<td class="caption">Total Amount</td><td class="caption">Paid Fees</td>
</tr><tr style="border-width: 3px; border-style: solid;">
<td>5889.2400</td><td><span disabled="disabled"><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" disabled="disabled" checked="checked" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth1" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth1">Month1</label></span></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth2" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth2">Month2</label></td>
</tr><tr>
<td>885.6000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth3" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth3">Month3</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth4" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth4">Month4</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth5" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth5">Month5</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth6" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth6">Month6</label></td>
</tr><tr>
<td>553.5000</td><td><input type="checkbox" onclick="javascript:toggleCheckBoxes(this);" name="ctl00$ctl00$B$A$ucStudentRegistration1$chkMonth7" id="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7"><label for="ctl00_ctl00_B_A_ucStudentRegistration1_chkMonth7">Month7</label></td>
</tr>
</tbody></table>
Your question doesn't disclose what you're really after and doesn't provide a dev-friendly example, but let's try anyway, shall we?
Check out the Working Demo (open the console).
Here's the JS for your convenience
$('.TotalPay input[type=checkbox]').change(function(){
var amount = $(this).parent().siblings().text();
console.log(amount);
});
Using JavaScript, we can bind event handlers to DOM elements from outside the markup, thus leaving the HTML clean and semantic. onXXXXX attributes might work, but you should really read about Unobtrusive JS.
In my example I chose jQuery, which greatly simplifies tedious tasks like DOM traversal. Basically, here's what this snippet do:
Grab the relevant checkboxes by CSS selector,
attach an anonymous handler to their 'change' event.
in it, traverse for the checkbox's 'uncle' and store its text in the amount variable
p.s. Please use semantic classnames for your elements. .net screws up your IDs, so IMO just rely more heavily on classes.
Also, "jQuery is great, learn JavaScript first"™.