I need to show an error if none of the below checkboxes are checked using using JavaScript.
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
You can implement it using selecting all elements with some given name using document.querySelectorAll and an attribute selector using the pseudoclass :checked:
var checkedCheckboxes = document.querySelectorAll("[name='chk_stat[]']:checked");
if (checkedCheckboxes.length == 0) {
console.log("No checkbox is checked...");
}
<tr>
<td>Status</td>
<td colspan="3">
<input type="checkbox" name="chk_stat[]" value="single" id="chk_stat">single
<input type="checkbox" name="chk_stat[]" value="married" id="chk_stat">Married
<input type="checkbox" name="chk_stat[]" value="divorcee" id="chk_stat">Divorcee
<input type="checkbox" name="chk_stat[]" value="student" id="chk_stat">Student
</td>
</tr>
Related
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 want all other checkboxes if one is selected. As far as I can see the code should be working (there are no console errors). What am I doing wrong?
As an added complexity this same event listener may tick other checkboxes; ideally the rows containing any of these checkboxes that become checked should also be disabled.
(".chkbox").on('change', function() {
var locked = false;
// var for current row
var row = $(this).closest('tr').index();
var $checkboxes = $('#key_table > tbody > tr > td:nth-child(' + (row + 1) + ')').find('[type=checkbox]');
$(this).on('click', function toggleLock(e) {
e.preventDefault();
// Make locked true if it was false, or vice-versa
locked = !locked;
// And apply that value to the 'disabled' attribute of the checkboxes
$checkboxes.attr('disabled', locked);
});
});
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
In this demo you can also uncheck and that action will enable each checkboxes in a row
working demo: http://jsfiddle.net/darxide/vpvaseL0/
$('body').on('change' , 'tr input' , function () {
var count_checked = 0;
$(this).parent().parent().find('input:checked').each(function() {
count_checked++
})
if(count_checked > 0){
$(this).parent().parent().find('input').each(function () {
$(this).prop('disabled' , true)
})
$(this).removeAttr('disabled')
} else {
$(this).parent().parent().find("input").removeAttr('disabled')
}
})
This should work:
$(".chkbox").click(function(){
var currentObj = $(this);
$(this)
.closest("tr")
.find(".chkbox").attr("disabled","disabled");
$(currentObj).removeAttr("disabled");
});
fiddle
You can use .closest().siblings().find().prop() method in this case. Another suggestion is to use group radios:
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
Here this.checked returns boolean value. If checked true and unchecked then false.
The issue seems to me that the way you have written your code that tells to bind the click event on currently clicked check box.
$(".chkbox").on('change', function() {
$(this).closest("td").siblings("td").find(":checkbox").prop("disabled", this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<caption>
<h5>Selection</h5>
</caption>
<tr id="9">
<td>9.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />orders</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />placements</td>
<td> </td>
<td> </td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
</tr>
<tr id="10">
<td>10.00</td>
<td>
<input type="checkbox" class="chkbox" title="9" value="9" />transport</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
</td>
<td> </td>
<td> </td>
</tr>
<tr id="11">
<td>11.00</td>
<td>
<input type="checkbox" class="chkbox" title="128" value="128" />merchandise</td>
<td>
<input type="checkbox" class="chkbox" title="113" value="113" />shipping</td>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
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.
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
<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.