How to check a set of radio buttons that all are selected? - javascript

I've a list of radio buttons that are generated dynamically. The names of radio buttons are also generated dynamically. The first row of radio buttons has name 1, the second row radio buttons have name 2. Each row has three radio buttons with same name but different values.
How can I check using jquery that one radio button is selected in each row when submitting the form?
<tr>
<th>1</th>
<td> Please select one option </td>
<td class='selectable_cell'>
<input type="radio" name="2" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="2" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="2" value="3" />
</td>
</tr>
<tr>
<th>2</th>
<td> Please select another option </td>
<td class='selectable_cell'>
<input type="radio" name="3" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="3" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="3" value="3" />
</td>
</tr>

Assuming that each row of radio buttons is wrapped into a specific element (e.g. a <fieldset> or a <tr>) you could easily check (at submit event) if the amount of wrapper elements is equal to the number of selected radio, with
var group = $('#yourform tr');
if (group.length === group.find('input[type="radio"]:checked').length) {
/* you choose one radio for each group */
}

I think you can add classes or ids to the rows something like #row1, #row2. After that its fairly easy
// gives you the no of radio buttons checked in first row
// $('input[type=radio]:checked', '#row1')
// gives you the no of radio buttons checked in second row
// $('input[type=radio]:checked', '#row2')
if($('input[type=radio]:checked', '#row1').length > 0 and $('input[type=radio]:checked', '#row2') > 0 ) {
// your code goes here
}

Try this
var names = {};
$(':radio').each(function() {
names[$(this).attr('name')] = true;
});
var count = 0;
$.each(names, function() {
count++;
});
if ($(':radio:checked').length === count) {
//All Checked
}

like this:
Demo: http://jsfiddle.net/K2WsA/ and from your updated code and minor change: http://jsfiddle.net/K2WsA/1/
behaviour: in demo select at least one in both the group and you will get an alert.
hope it helps!
group them according to names:
if($("input[type=radio][name=foo]:checked").length > 0 &&
$("input[type=radio][name=bar]:checked").length > 0)
{
/* do something */
}

Here on below demo link, i have done complete bins for above issue. so please check once it may help you.
Demo: http://codebins.com/bin/4ldqp9l
HTML:
<table id="table1" cellpadding="0" cellspacing="0" width="70%">
<tr>
<th>
1
</th>
<td>
Please select one option
</td>
<td class='selectable_cell'>
<input type="radio" name="rd1" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd1" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd1" value="3" />
</td>
</tr>
<tr>
<th>
2
</th>
<td>
Please select another option
</td>
<td class='selectable_cell'>
<input type="radio" name="rd2" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd2" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd2" value="3" />
</td>
</tr>
<tr>
<th>
3
</th>
<td>
Please select another option
</td>
<td class='selectable_cell'>
<input type="radio" name="rd3" value="1" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd3" value="2" />
</td>
<td class='selectable_cell'>
<input type="radio" name="rd3" value="3" />
</td>
</tr>
</table>
<br/>
<input type="button" id="btncheck" name="btncheck" value="Check Radio Selection" />
<div id="result">
</div>
CSS:
table#table1{
border:1px solid #225599;
}
table#table1 th{
border:1px solid #225599;
padding:2px;
background:#a48866;
}
table#table1 td{
border:1px solid #225599;
padding:2px;
background:#94dbfd;
}
.error{
color:#ca1619;
}
.success{
color:#006633;
}
JQuery:
$(function() {
$("#btncheck").click(function() {
var result = "";
$("table#table1").find("tr").each(function() {
var row = $.trim($(this).find("th").text());
if ($(this).find("input[type=radio]:checked").length > 0) {
var opValue = $(this).find("input[type=radio]:checked").val();
result += "<p class='success'>Row " + row + ": The option with value \"" + opValue + "\" has been selected... :)</p>";
} else {
result += "<p class='error'>Row " + row + ": No option has been selected..!</p>";
}
if (result != "") {
$("div#result").html(result);
}
});
});
});
Demo: http://codebins.com/bin/4ldqp9l

Related

Disable/Hide checkboxes in a checkbox list given the value of a checkbox (pure JS)

I'm trying to disable or hide some checkboxes in a list of checkboxes given a max number of checkboxes allowed to be selected.
i.e. If the value of checkbox is greater that my_value then the checkbox is disabled/hidden and cannot be selected... and work it into this code:
<div class="container">
<table class="table">
<thead>
<tr>
<th align="left">Max Number of Checks</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="Check_01" name="FW_check" value="1" type="checkbox" />
<input id="Check_02" name="FW_check" value="2" type="checkbox" />
<input id="Check_03" name="FW_check" value="3" type="checkbox" />
<input id="Check_04" name="FW_check" value="4" type="checkbox" />
<input id="Check_05" name="FW_check" value="5" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Check_06" name="FW_check" value="6" type="checkbox" />
<input id="Check_07" name="FW_check" value="7" type="checkbox" />
<input id="Check_08" name="FW_check" value="8" type="checkbox" />
<input id="Check_09" name="FW_check" value="9" type="checkbox" />
<input id="Check_10" name="FW_check" value="10" type="checkbox" />
</td>
</tr>
</tbody>
</table>
</div>
I am assuming the following:
my_value (the max value of the checkbox) is set somewhere outside of this code
all checkboxes in the table with name attribute FW_check look like the input elements you posted above (mostly meaning that their value is a valid number)
That said, I would recommend you do the following:
Get a list of every input[name="FW_check"] within the table, using document.querySelector
Iterate through these checkboxes, check the value of the input, and set disabled = true if the value is greater than the max value.
Here's some basic code that would accomplish this:
const my_value = // some number that you have defined elsewhere, as mentioned above
const checkboxes = document.querySelector('.table input[name="FW_check"]');
for (const checkbox of checkboxes) {
const value = Number.parseInt(checkbox.value, 10); // note the base 10. in case you accidentally put a 0 before a number, it still parses correctly and doesn't assume base 8
checkbox.disabled = value > my_value; // this will handle re-enabling the checkbox if this function is run again after my_value drops
}
This can of course be run as many times as you want, put in a function, etc.
If I understand you question properly , this is what you are looking for .
var max = 5;
var checkboxes = document.getElementsByName("FW_check");
for(var i=0;i<checkboxes.length;i++){
if(i<max){
checkboxes[i].disabled = false;
} else {
checkboxes[i].disabled = true;
}
}
<div class="container">
<table class="table">
<thead>
<tr>
<th align="left">Max Number of Checks</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="Check_01" name="FW_check" value="1" type="checkbox" />
<input id="Check_02" name="FW_check" value="2" type="checkbox" />
<input id="Check_03" name="FW_check" value="3" type="checkbox" />
<input id="Check_04" name="FW_check" value="4" type="checkbox" />
<input id="Check_05" name="FW_check" value="5" type="checkbox" />
</td>
</tr>
<tr>
<td>
<input id="Check_06" name="FW_check" value="6" type="checkbox" />
<input id="Check_07" name="FW_check" value="7" type="checkbox" />
<input id="Check_08" name="FW_check" value="8" type="checkbox" />
<input id="Check_09" name="FW_check" value="9" type="checkbox" />
<input id="Check_10" name="FW_check" value="10" type="checkbox" />
</td>
</tr>
</tbody>
</table>
</div>

JS - On yes/no option change check if all 'No' options were selected

How do I check if all 'NO' answers on Yes/No table were chosen, this has to check on each change to any of the Yes/No answers, and then send an alert if all 'NO' were selected
Tried the below but no response seen..
$('.mb-n').change(function(){
if ($('.mb-n:checked').length == $('.mb-n').length) {
alert('all no ');
} else { alert('all y ');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y"><input type="radio" name="123" value="Y" class="{required: true, messages:{required:''}}" rel="" id="123_Y"></td>
<td class="mb-n"><input type="radio" name="123" value="N" checked="checked" id="123_N" rel=""></td>
</tr>
</table>
Using vanilla JavaScript :
function listenForInputChange ()
{
// Get all inputs with a NO value and spread them into an array
let inputs = [ ...document.querySelectorAll( '.mb-n > input' ) ];
// Add input event listener on table and listen for change
document.querySelector( 'table' ).addEventListener( 'input', evt => {
// if every inputs are checked
if ( inputs.every( input => input.checked ) )
{
// Do something...
console.log( 'All answers are NO' );
}
}, false );
}
listenForInputChange();
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y"><input type="radio" name="q1" value="Y"></td>
<td class="mb-n"><input type="radio" name="q1" value="N" checked></td>
</tr>
<tr class="mb-even">
<td class="mb-prompt"><span>Q2.</span></td>
<td class="mb-y"><input type="radio" name="q2" value="Y"></td>
<td class="mb-n"><input type="radio" name="q2" value="N" checked></td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q3.</span></td>
<td class="mb-y"><input type="radio" name="q3" value="Y"></td>
<td class="mb-n"><input type="radio" name="q3" value="N" checked></td>
</tr>
</table>
You need to check if the radio is checked, not if the td is checked (<td> doesn't have a checked property).
I made some adjustments to your code, including modifications in HTML, that was a little bit weird. I added a similar class to all radio buttons and a similar class to all YES radios and NO radios, that way you'll have a much better control over what is selected and what is not.
Check below
$('.radioBtn').change(function(){
if ($('.radioNo:checked').length == $('.mb-n').length) {
console.log('all no');
} else if ($('.radioYes:checked').length == $('.mb-y').length){
console.log('all yes');
}else{
console.log("Some Yes and some No")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q1.</span></td>
<td class="mb-y">
<input type="radio" name="123" value="Y" class="radioBtn radioYes" id="123_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="123" value="N" class="radioBtn radioNo" checked id="123_N" >NO
</td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q2.</span></td>
<td class="mb-y">
<input type="radio" name="1234" value="Y" class="radioBtn radioYes" id="1234_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="1234" value="N" class="radioBtn radioNo" checked id="1234_N" >NO
</td>
</tr>
<tr class="mb-odd">
<td class="mb-prompt"><span>Q3.</span></td>
<td class="mb-y">
<input type="radio" name="12345" value="Y" class="radioBtn radioYes" id="12345_Y">YES
</td>
<td class="mb-n">
<input type="radio" name="12345" value="N" class="radioBtn radioNo" checked id="12345_N" >NO
</td>
</tr>
</table>
Assuming that every row in the table has a checkbox you should be able to do it like this without changing anything in your setup:
$('.mb-n').change(function(){
if ($("table").find("tr").length == $(".mb-n > input[type='radio']:checked").length)
window.alert("Oh noes...");
});

change all checkboxes in one table-row

I want to uncheck all checkboxes that are in one table row.
I have this HTML code :
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" checked="checked" type="checkbox">
Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox">
Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox">
Feld 3
</td>
<td>...and so on
<td>
</tr>
What I have tried at now is this jquery code:
$("tr#unlosta_line_1").children("td").each(function(i) { $(i).prop("checked", false) } )
Problem with you implementation is that, You are setting checked property of TD element not checkbox.
You can directly use :checkbox selector, then set its checked property
$("#unlosta_line_1 :checkbox").prop("checked", false);
input is the children of the td
(function (){
$("#unlosta_line_1").children("td").each(function(i) {
$(this).children('input').attr("checked", false)
})
})()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="unlosta_line_1">
<td>
<input id="unlosta_prop_id_1" name="unlosta_prop_id[1]" value="1" type="checkbox"> Feld 1
</td>
<td>
<input id="unlosta_prop_id_2" name="unlosta_prop_id[2]" value="2" type="checkbox"> Feld 2
</td>
<td>
<input id="unlosta_prop_id_3" name="unlosta_prop_id[3]" value="3" type="checkbox"> Feld 3
</td>
<td>...and so on
<td>
</tr>
</table>

I have multiple <td> with the checkbox and its values.I want to change colour of <td>

Below is my HTML code which contains multiple checkboxes with the respective values in <td>. I got the values of clicked checkboxes through php which is an array format $res[]. I want to make the checkbox disappear of which i got values and make the <td> background color to red with the value of checkbox visible. I got the values of checkboxes in php as $res[0][seat]=>4; and $res[1][seat]=>1 where 4 and 1 are values. How to do this using jQuery?
<table>
<tr>
<td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td>
</tr>
<tr>
<td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td>
</tr>
</table>
Try this:
$('.chk').on('click', function(e){
e.preventDefault();
if($(this).is(':checked')) {
$(this).hide();
$(this).closest('td').css('background-color','red');
}
});
Fiddle here
UPDATED try this:
var arr=[4,1];// array list received from php
for(i=0;i< arr.length;i++){
$('table tbody tr td input[type=checkbox]').each(function(){
if($(this).val()==arr[i]){
$(this).hide();
$(this).closest('td').css('background-color','red');
}else if($(this).is(':visible')){
$(this).closest('td').css('background-color','pink');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
</td></tr></table>
use filter() in jquery
var arrayValue = [4, 1];
$(".chk").filter(function () {
return arrayValue.indexOf(+this.value) != -1 // check arrayvalue is present in check box or not using indexOf
}).closest("td").css('background-color', 'red').find(".chk").hide(); // set background for closest td and hide chk
DEMO

validating multiple textboxes in javascript

<form name="quest" onsubmit="return validate();">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="R1" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="R1" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="1" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="2" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="3" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="4" name="R3">
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"></td>
<td>
<input type="radio" value="5" name="R3">
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
I want to validate to that a person can enter min 3 responses(Add response) and max 5 responses. once enter the response only allow to select the answer(radio button). pls anbody help me . thanks in advance
You can try this solution below.
Note that a full working example can be found at the end of this post.
Set the method method attribute of your <form> to GET or POST, and define its method attribute (= which specifies where to send the form's data)
Add an ID to each of your "Answer" checkboxes. You can provide them the following IDs, respectively: R1, R2, R3, R4, and R5. Provide different names to each input.
Disable your "Answer" checkboxes by adding the attribute disabled. Since you only want the responses to check / uncheck the checkboxes, we want to prevent the users from doing it.
Eg:
<input type="radio" value="1" name="R1" id="R1" disabled>
Add an the following events to each of your "Answer" text inputs:
onkeyup="toggle_checkbox(this, i);", where i should be the index related to the ID of the checkbox concerned (check the example below). The toggle_checkbox function is called every time we type something inside an "Answer" textbox, and checks, or unchecks, the checkbox associated to the text input we're typing in, depending on the latter's content:
if the content of the texbox is empty, the function unchecks the checkbox,
else, it checks it.
ondragstart="return false" which prevents to copy the content from a given textbox to another.
Eg:
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer
</td>
In the example above, i is equal to 1, which is related to the concerned checkbox's ID R1.
In your <head>, add the following JS functions:
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="") {
document.getElementById("R"+index).checked = "checked";
}
else {
document.getElementById("R"+index).checked = "";
}
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked) {
nb_checked++;
}
}
if(nb_checked < 3) {
alert("Enter at least 3 responses!");
}
else {
isok = true;
}
return isok;
}
As you can see, there are two functions: one is toggle_checkbox and the other is validate.
As explained a little bit previously, the function toggle_checkbox is called every time we type something inside an "Answer" textbox. This checks / unchecks the associated checkbox according to whether the content of the corresponding textbox is empty or not.
The function validate is called when we submit the form. It counts the number of "Answer" checkboxes which are checked with the variable nb_checked. If this number is lower than 3, then we alert the message Enter at least 3 responses!. Otherwise, we set the output variable isok to true, which will allow the form to be processed and sent to the link provided in the action attribute of the <form>
Full working example:
<!DOCTYPE html>
<html>
<head>
<script>
function toggle_checkbox(el, index) {
var val = el.value;
if(val!="")
document.getElementById("R"+index).checked = "checked";
else document.getElementById("R"+index).checked = "";
}
function validate() {
var isok = false;
var nb_checked = 0;
for(var i =1; i<6; i++) {
var el = document.getElementById("R"+i);
if(el.checked)
nb_checked++;
}
if(nb_checked < 3) alert("Enter at least 3 responses!");
else
isok = true;
return isok;
}
</script>
<head>
<body>
<form onsubmit="return validate();" method="post" action="http://www.google.com">
<table width="100%" border="1">
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td width="98">Response Type<font color="#CC0000">*</font></td>
<td>
<input type="radio" value="1" name="Ra" onClick="showresponse(1)">
True/False
<input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single
Best Answer
<input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple
Answers</td>
</tr>
<td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
<td>
<table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
<tr>
<td width="161">
<input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
<td>
<input type="radio" value="1" name="R1" id="R1" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb2" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
<td>
<input type="radio" value="2" name="R2" id="R2" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
<td>
<input type="radio" value="3" name="R3" id="R3" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb4" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
<td>
<input type="radio" value="4" name="R4" id="R4" disabled>
Answer</td>
</tr>
<tr>
<td width="161">
<input type="text" name="cb5" size="20" style="width:300px;" maxlength="100"
onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
<td>
<input type="radio" value="5" name="R5" id="R5" disabled>
Answer</td>
</tr>
</table>
</td>
</tr>
</table>
<input type="submit" value="SUBMIT"/>
</form>
</body>
</html>
PS: Change the action attribute of the form. I set google's url just to let you see the redirection when the form is valid.
Hope this helps. Let me know if you have any questions.

Categories