I am defining an array of checked checkboxes:
<script>
var all_checked = new Array();
function add_checked(checked_checkbox_id)
{
all_checked.push(checked_checkbox_id);
}
<html>
<input type="checkbox" name="a" id="1" value="1" onclick="add_checked(?????);" />
</html>
So my question is how to pass the checked checkbox ID to the function to append to the global
all_checked
variable
Pass this in your function and then use it to get the id property:
HTML
<input type="checkbox" name="a" id="1" value="1" onclick="add_checked(this);" />
JavaScript
var all_checked = new Array();
function add_checked(el) {
all_checked.push(el.id);
}
Remember, this will push the id to the array no matter what, whether the box is checked or unchecked, even if the id already exists in the array.
JSFiddle
Use this keyword by passing to yout function.
onclick="add_checked(this)";
Here you can the id as
this.id
then in
function add_checked(checked_checkbox) {
all_checked.push(checked_checkbox.id);
}
FYI: script tag should be within html tag
HTML:
<button onclick="send_query(document.getElementsByTagName('input'))">
function send_query(check) {
var values = [];
for (i = 0; i < check.length; i++) {
if (check[i].checked == true) {
values.push(check[i].value);
}
}
console.log(values.join());
}
Related
I have an HTML form with checkboxes like so:
<form id="filterOptions" method="post" action="">
<input type="checkbox" name="filterTaxi" id="filterTaxi" />
<input type="checkbox" name="filterBicycle" id="filterBicycle" />
<input type="checkbox" name="filterCarPark" id="filterCarPark" />
<input type="checkbox" name="filterBed" id="filterBed" />
</form>
Now I want to use javascript to apply a function whenever a checkbox is changed.
At the moment I can apply a function when the first checkbox is changed like so:
document.getElementById('filterTaxi').onchange = function(){
//do something here
};
So my question is, how do I avoid writing that for every checkbox and instead have a function fired when any of the checkboxes are changed?
You can either select all input or add a class and do:
var input = document.getElementsByTagName('input');
for(var i = 0; i < input.length; i++) {
input[i].onchange = function() {
console.log(this);
}
}
onchange function can be the same for all of them.
fiddle: http://jsfiddle.net/XgS9K/
for all elements.
document.getElementById('filterOptions').onchange = function(){
alert()
};
This will give you the onchange handler for checking and unchecking of checkboxes.
var allInputs = document.getElementsByTagName('input');
for (var i = 0; i < allInputs.length; i++) {
if (allInputs[i].type == 'checkbox') {
allInputs[i].onchange = function () {
if (this.checked) {
// your checked code here
console.log('checked');
} else {
// your unchecked code here
console.log('unchecked');
}
}
}
}
DEMO http://jsfiddle.net/L324t/
I have three checkboxes that looks like this:
<input id="image_tagging" class="1" type="checkbox" value="1" checked="checked" name="data[image_tagging]">
now i wanted to create some ajax (which is working fine) however only the first checkbox has the event:
here is my Jquery function:
$('#image_tagging').click(function(){
var value = 0;
var websiteID = $(this).attr('class');
if($(this).attr('checked')){
value = 4;
}else{
value = -4;
}
alert('works! '+'id = '+websiteID+" value = "+value );
});
So my question is. why is this click function only happening for one of my checkboxes? (if it matters it is only the first checkbox that is working)
ids must be unique on an html page. Instead use a class in the markup and a class selector in jQuery.
HTML
<input class="image_tagging 1" type="checkbox" value="1" checked="checked" name="data[image_tagging]">
Javascript
$('.image_tagging').click(function(){
var value = 0;
var websiteID = $(this).attr('class');
if($(this).attr('checked')){
value = 4;
}else{
value = -4;
}
alert('works! '+'id = '+websiteID+" value = "+value );
});
IDs have to be unique change the id to class instead
id="image_tagging"
to
class="image_tagging"
then
$('.image_tagging').click(function(){
in html
<input class="image_tagging" type="checkbox" value="1" checked="checked" name="data[image_tagging]">
in js
$('.image_tagging').click(function(){
// your code
});
id must be unique, use class instead or try this...
$('input[type="checkbox"]').click(function(){
var value = 0;
var websiteID = $(this).attr('class');
if($(this).attr('checked')){
value = 4;
}else{
value = -4;
}
alert('works! '+'id = '+websiteID+" value = "+value );
});
no need to change any HTML code you wrote already...
ID should be unique in your DOM structure. Use class instead of ID for such things.
<input id="image_tagging" class="img_tagging 1" type="checkbox" value="1" checked="checked" name="data[image_tagging]">
And then instead of #image_tagging use .image_tagging for binding click event
$('.image_tagging').click(function(){
I want to write a java script function which will get the input tag(s) with type as "checkbox" from the td and mark them unchecked. Following is the jsp code:
<td id="uncheckedByDefault" align=center class=listTypeOne>
<% if (priv.getViewPrivilege() == 1) { %>
<input name="view" type="checkbox" value='<%= priv.getAttributeId() %>' checked>
<% } else { %>
<input name="view" type="checkbox" value='<%= priv.getAttributeId()%>'>
<% } %>
</td>
Now here the td has the id="uncheckedByDefault". I want to get all the input tag(s) and set them as unchecked. Can anybody tell how can I do that. Thanks in advance.
Try:
inputs = document.getElementById('uncheckedByDefault').getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
inputs[index].checked=false;
}
Here is the function you need, call it whenever you want:
function uncheckAll(){
var inputsContainer = document.getElementById('uncheckedByDefault');
var allInputs = inputsContainer.getElementsByTagName('input');
var len = allInputs.length;
for(var i=0; i<len; i++){
if(allInputs[i].type == 'checkbox'){
allInputs[i].checked = false;
}
}
}
I don't know if I understood your problem, but I will give it a try.
First of all, you can print elements into your web page with a <% ... %> (I will show how in my answer), so you don't have to set a condition into <% ... %>, print an element... etc. All in the same Java function.
Secondly, you can access to your Object properties without calling your getters. Aren't needed at all if you want to set his value into an specific field. (i.e.) <input type="text" name="clientName" value="${client.clientName}" />
Here is my proposal for your question:
<td id="uncheckedByDefault" align=center class=listTypeOne>
<%
if (priv.getViewPrivilege() == 1) {
out.println("<input name='view' type='checkbox' +
value=" + priv.getAttributeId() + " checked = 'checked'>");
} else {
out.println("<input name='view' type='checkbox' +
value=" + priv.getAttributeId() + ">");
}
%>
</td>
Report if it worked or it's not what you wanted.
UPDATE
If you want them all unchecked, because of your element id attribute suggests it. Why do you want to check your Object properties to set it checked or not? Just add your element and don't set it a checked property.
<input name='view' type='checkbox' value="${priv.attributeId}">
This should work
var allInputs = document.getElementById("uncheckedByDefault").getElementsByTagName("input");
for (i = 0; i < allInputs.length; i++) {
if (allInputs[i].getAttribute("type") == 'checkbox') {
allInputs[i].removeAttribute("checked");
}
}
You just need to get a list of all of the elements you're interested in, then you need to perform some action on them. I've added the forEachNode function, since the querySelectorAll function doesn't actually return an array - it returns a nodeList which has similar syntax and functionality as an array, but omits the forEach function.
Note: a checkbox is checked if it has the attribute checked. The actual value of the attribute is not used - it's just it's presence or lack thereof that dictates the check-state. As such, you could write anything rather than 0 to the checked attribute.
EDIT: The above note is incorrect. Both the 'checked' attribute as visible in the html and the 'checked' member variable control the state. I've updated the uncheck and check functions.
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);
function mInit()
{
}
/*
func to be called takes 3 variables. currentElement, currentIndex, nodeList the element belongs to.
*/
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
/*
function uncheck(elem)
{
elem.removeAttribute('checked');
}
function check(elem)
{
elem.setAttribute('checked',0);
}
*/
function uncheck(elem)
{
elem.checked = false;
elem.removeAttribute('checked');
}
function check(elem)
{
elem.checked = true;
elem.setAttribute('checked',0);
}
function checkAll()
{
var checkBoxElements = document.querySelectorAll('input[type=checkbox]');
forEachNode(checkBoxElements, check);
}
function uncheckAll()
{
var checkBoxElements = document.querySelectorAll('input[type=checkbox]');
forEachNode(checkBoxElements, uncheck);
}
</script>
<style>
</style>
</head>
<body>
<button onclick='uncheckAll()'>Uncheck all</button>
<button onclick='checkAll()'>Check all</button>
<br>
<input type='checkbox'/>CB 1
<br>
<input type='checkbox'/>CB 2
<br>
<input type='checkbox'/>CB 3
<br>
<input type='checkbox'/>CB 4
<br>
<input type='checkbox'/>CB 5
<br>
</body>
</html>
Pls have a look at the following code.
<script type='text/javascript'>
function apps(){
var app= new Array(8);
for (var i=0;i<8;i++)
{
app[i]= ....;
}
}
</script>
<input type="hidden" name="NEW" value= ? >
< ....button label="Submit" OnClick='apps();return false;'/>
Here the apps() method gets executed on clicking the Submit button.
I want to access the value of app (Array) by use of a hidden element. Pls let me know what code I should write for this purpose.
<input type="hidden" name="foo" value="bar" />
document.write(document.getElementsByName('foo')[0].value);
output is "bar". getElementsByName returns an array of matching form elements with the name supplied. the [0] grabs the first match, and .value retrieves the value.
You can do this with JQuery as well.
<input id="foo-hidden" type="hidden" name="foo" value="bar" />
<script type="text/javascript">
function apps() {
var app= new Array(8);
for (var i=0; i < 8; i++) {
app[i]= $('#foo-hidden').val();
}
}
</script>
I am implementing an HTML form with some checkbox input elements, and I want to have a Select All or DeSelect All button. However, I do not want to rely on the name of the input element (like this example) but rather the type because I have multiple checkbox groups with different names. Is there a way to check and uncheck all checkbox input elements within a form with JavaScript by relying on the type instead of the name?
Edit: We rely on YUI libraries, so I have access YUI if that provides a solution.
This should do it:
<script>
function checkUncheck(form, setTo) {
var c = document.getElementById(form).getElementsByTagName('input');
for (var i = 0; i < c.length; i++) {
if (c[i].type == 'checkbox') {
c[i].checked = setTo;
}
}
}
</script>
<form id='myForm'>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='checkbox' name='test' value='1'><br>
<input type='button' onclick="checkUncheck('myForm', true);" value='Check'>
<input type='button' onclick="checkUncheck('myForm', false);" value='Uncheck'>
</form>
function findCheckBoxes(el, check) {
for(var i=0;el.childNodes[i];i++)
{
var child = el.childNodes[i];
if (child.type=="checkbox")
{
child.checked = check;
}
if (child.childNodes.length > 0)
this.findCheckBoxes(child, check);
}
}
iterate through the form.elements collection and check .type == "checkbox".
var button = getSelectAllButtonInFormSomeHow();
/*all formelements have a reference to the form. And the form has an elements-collection.*/
var elements = button.form.elements;
for(var i = 0; i < elements.length;i++) {
var input = elements[i];
if (input.tagName == "input" && input.type == "checkbox") input.checked = true;
}
Every input element has an attribute, type, which for checkboxes is "checkbox" so you could try something like this:
for (var i = 0; i < document.myForm.elements.length; i++) {
if (document.myForm.elements[i].type == "checkbox") {
document.myForm.elements[i].checked = true;
}
}
If jQuery is an option you can do this rather easily.
See the documentation on jQuery selectors. (The last example in the section shows how to do it with radio buttons but just replace that with check boxes.)
Is assigning a class to all required checkbox elements an option? If yes, then this is how I would do it (assuming "class_name" is the name of the css class present in all checkbox elements in question):
function selectCheckBoxes(bChecked) {
var aCheckBoxes = YAHOO.util.Dom.getElementsByClassName('class_name', 'input');
for (var i = 0; i < aCheckBoxes.length; i++) {
aCheckBoxes[i].checked = bChecked;
}
}
If you want to stay away from classes, but can get parent element by ID (or any other method, I will use ID in the example, though), than you can do this:
function selectCheckBoxes(bChecked) {
var oParent = document.getElementById('parentsID');
var aElements = oParent.getElementsByTagName('input');
for (var i = 0; i < aElements.length; i++) {
if (aElements[i].type == 'checkbox') {
aElements[i].checked = bChecked;
}
}
}
I would stick to the "class" method, however.
<html>
<head>
<script>
function selectCheckBox()
{
if(document.getElementById('id11').checked==true)
{
document.frm.id2.checked=true
document.frm.id3.checked=true
document.frm.id4.checked=true
}
if(document.getElementById('id11').checked==false)
{
document.frm.id2.checked=false
document.frm.id3.checked=false
document.frm.id4.checked=false
}
}
function selectCheckBox1()
{
if(document.getElementById('id12').checked==false)
{
document.frm.id1.checked=false
}
}
function selectCheckBox2()
{
if(document.getElementById('id13').checked==false)
{
document.frm.id1.checked=false
}
}
function selectCheckBox3()
{
if(document.getElementById('id14').checked==false)
{
document.frm.id1.checked=false
}
}
</script>
</head>
<body>
<form name="frm">
All :<input type="checkbox" id="id11" name="id1" value="1" onClick="selectCheckBox()"><br>
A. :<input type="checkbox" id="id12" name="id2" value="2" onClick="selectCheckBox1()"><br>
B. :<input type="checkbox" id="id13" name="id3" value="3" onClick="selectCheckBox2()"><br>
C. :<input type="checkbox" id="id14" name="id4" value="4" onClick="selectCheckBox3()"><br>
</form>
</body>
</html>