This is my first js script so be gentle with me :)
The problem is when I click on check all button, all checkboxes are checked but it won't write values to textarea, if I click individual checkboxes then the value is added/removed and that is ok, I'm just stuck on that check all/uncheck all button.
http://jsfiddle.net/LAcgE/74/
function check(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = true ;
}
function uncheck(chk) {
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
var itemsAdded = Array();
function movetext(text) {
var i = itemsAdded.indexOf(text)
if ( i >= 0) {
itemsAdded.splice(i,1);
}
else {
itemsAdded.push(text);
}
document.getElementById("result").value=itemsAdded.join("\n");
}
<form action='#' method='post'>
<input type='checkbox' value='aaa' name="add" onclick='movetext(this.value)'/>a
<input type='checkbox' value='bbb' name="add" onclick='movetext(this.value)'/>b
<input type='checkbox' value='ccc' name="add" onclick='movetext(this.value)'/>c
<input type='checkbox' value='ddd' name="add" onclick='movetext(this.value)'/>d
<input type='checkbox' value='eee' name="add" onclick='movetext(this.value)'/>e
<input type="button" value="check all" onClick="check(this.form.add)">
<input type="button" value="uncheck all" onClick="uncheck(this.form.add)">
<textarea id="result" rows="8" cols="40"></textarea>
<input type="submit" value="Submit">
</form>
Replace your check and uncheck functions with this
function check(chk) {
for (i = 0; i < chk.length; i++)
{
chk[i].checked = true ;
movetext(chk[i].value);
}
}
function uncheck(chk) {
for (i = 0; i < chk.length; i++)
{
chk[i].checked = false ;
movetext(chk[i].value);
}
}
You just have to manually call the other method. I tried it in your fiddle.
You forget to call movetext() function in check() and uncheck() function.
Add this after you do check/uncheck:
movetext(chk[i].value);
Related
I have list of check boxes, In that i disabled one checkbox i.e.SQL.
When i click on select all button, all the checkbox getting selected.
Instead i need to select all checkboxes except the disabled one.
Please find the below snapshots.
currently its showing as in fig 1. I am expecting like in fig 2.
Please find the code below.
<script type="text/javascript">
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;
}
checkflag = "true";
return "Uncheck All";
} else {
for (i = 0; i < field.length; i++) {
field[i].checked = false;
}
checkflag = "false";
return "Check All";
}
}
</script>
<form name=myform action="" method=post>
<table>
<tr><td>
<strong>Make a selection</strong><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5" disabled="true" >SQL<br>
<br>
<input type=button value="Check All" onClick="this.value=check(this.form.list)">
</td></tr>
</table>
</form>
Please help me.
Thanks in Advance.
jsBin demo
This is all you need
function check(field) {
var io = field.io ^= 1; // Toggle flag
for (i=0; i<field.length; i++)
if(!field[i].disabled) field[i].checked = io;
return io ? "Uncheck All" : "Check All";
}
I have the following code. I want to check all the check boxes on button click. How do I do this using JavaScript only?
<div id="blocked_list_add_website_help_text">
<button type="button" id="blockSelectAll" class="secondary">Select All</button>
</div>
<input type="checkbox" value="box1" />Box1
<input type="checkbox" value="box2" />Box2
<input type="checkbox" value="box3" />Box3
Pure JS:
document.getElementById("blockSelectAll").onclick = function() {
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = true;
}
}
}
Working fiddle
Using document.querySelectorAll:
document.getElementById("blockSelectAll").onclick = function(){
var checkboxes = document.querySelectorAll('input[type=checkbox]');
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = true;
}
};
Yes you can just try this
HTML
<button type="button" id="blockSelectAll" onclick="checkAll()" class="secondary">Select All</button>
JavaScript
function checkAll() {
var checkboxes = document.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].setAttribute('checked', true) // Or inputs[i].checked = true;
}
}
}
Fiddle Demo
<script language="JavaScript">
function checker() {
checkboxes = document.getElementsByTagName('input');
for each(var checkbox in checkboxes)
checkbox.checked = true;
}
</script>
<div id="blocked_list_add_website_help_text">
<button type="button" id="blockSelectAll" class="secondary" onclick=checker() >Select All</button>
</div>
<input type="checkbox" value="box1" />Box1
<input type="checkbox" value="box2" />Box2
<input type="checkbox" value="box3" />Box3
Firstly I apologies, I've just starting out with JavaScript
I have a problem with a form. I have two groups of Radio buttons on the form (age and bmi)
Everytime the 'Calculate' button is clicked, I want add the values of each checked Radio button and alert this to the screen.
It works in Chrome, but ALL other browsers give an NAN error.
Can anyone help?
<br>
<input type="radio" name="age" class="myradioButton" value = "1"/>
<input type="radio" name="bmi" class="myradioButton" value = "3"/>
<input type="button" name="Calculate" id="calculate"onclick="calculatehealth()" value="Calculate"/>
<br>
<script>
function calculatehealth() {
var valueAge = document.forms['myForm'].elements["age"].value;
var valueint = parseInt(valueAge);
var valueBmi = document.forms['myForm'].elements["bmi"].value;
var Bmiint = parseInt(valueBmi);
var total = Bmiint + valueint;
alert(total);
}
Demo: http://jsfiddle.net/z4RKx/
HTML
<form id="myForm">
<input type="radio" name="age" class="myradioButton" value="1" />
<input type="radio" name="bmi" class="myradioButton" value="3" />
<input type="button" name="Calculate" value="Calculate" onclick='calculatehealth()' />
</form>
JS
function calculatehealth() {
var valueint = 0;
if (document.forms['myForm'].elements["age"].checked) {
valueint += parseInt(document.forms['myForm'].elements["age"].value);
}
if (document.forms['myForm'].elements["bmi"].checked) {
valueint += parseInt(document.forms['myForm'].elements["bmi"].value);
}
alert(valueint);
}
And if you have many elements this might be a good alternative:
function calculatehealth() {
var valueint = 0;
for(i = 0; i < document.forms['myForm'].elements.length; i++) {
if (document.forms['myForm'].elements[i].checked) {
valueint += parseInt(document.forms['myForm'].elements[i].value);
}
}
alert(valueint);
}
I can able to load value from databases to text-box...so now named as auto..from this i want to create a auto search with multiple check box to select multiple value in text-box java script...its possible ...??
<form name="form1">
<input type="checkbox" name="checkboxname" value="a">
<input type="checkbox" name="checkboxname" value="b">
<input type="checkbox" name="checkboxname" value="c">
</form>
<form name="form2">
<input type="text" name="textname">
</form>
var textbox = document.getElementsByName("textname")[0];
var checkboxes = document.getElementsByName("checkboxname");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = (function(chk){
return function() {
var value = "";
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
if (value === "") {
value += checkboxes[j].value;
} else {
value += "," + checkboxes[j].value;
}
}
}
textbox.value = value;
}
})(checkbox);
}
Try this,
<form name="form1" class="form_chk">
<input type="checkbox" name="checkboxname" value="a" class="chk_box">a
<input type="checkbox" name="checkboxname" value="b" class="chk_box">b
<input type="checkbox" name="checkboxname" value="c" class="chk_box">c
</form>
$( "#txt_search" ).blur(function(e) {
var $search = $(e.currentTarget),
search_str = $search.val().toLowerCase(), $chk,
$chk_ele = $('.chk_box').filter(function(index, chk){
if($(chk).val().toLowerCase().search(search_str) !== -1){
return $(chk);
}
});
$('.chk_box').prop('checked', false);
$chk_ele.prop('checked', true);
});
See the output : http://jsfiddle.net/J7dUz/
my validation is work on only one radio button and all left radio button its not working here is my code
<script>
function xyz()
{
var x = document.getElementsByName("red");
//alert(x.length);
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}else{
alert("fe");
return false;
}
}
}
</script>
<form name="as" method="post" action="n.php">
<input type="radio" id="x1" name="red">
<input type="radio" id="x2" name="red">
<input type="radio" id="x3" name="red">
<input type="radio" id="x4" name="red">
<input type="submit" value="button" onclick="return xyz()">
</form>
You should try this.
function xyz()
{
var x = document.getElementsByName("red");
for (var i=0; i<x.length; i++)
{
if (x[i].checked) {
return true;
}
}
// No radio button checked, return false.
return false;
}
Your function will return in either states after first run. To skip to next element of iteration you should use continue instead of return. See: http://www.w3schools.com/js/js_break.asp. To iterate threw all elements you shoul do:
for (var i=0; i<x.length; i++) {
if (x[i].checked) {
// Do something if checked
} else {
// Do something if not checked
alert("fe");
}
// Continue to next element
}
Try the following code:
<script type="text/javascript">
function validate()
{
var checked = null;
var inputs = document.getElementsByName('correct');
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked) {
checked = inputs[i];
}
}
if(checked==null)
{
alert('Please choose an option');
return false;
}
else
{
return confirm('Save As Correct Answer '+checked.value+'');
}
}
</script>
<form method="post" name="Form" onsubmit="return validate()" action="">
<input type="radio" name="correct" id="correct" value="A">
<input type="radio" name="correct" id="correct" value="B">
</form>