How can I deselect all checkboxes using JavaScript?
You can do something like this:
function uncheckAll(){
var frm = document.getElementById('your form id');
for (var i = 0; i < count(frm.elements.length); i++){
if (frm.elements[i].type === 'checkbox'){
frm.elements[i].checked = false;
}
}
}
And to check them all back:
function checkAll(){
var frm = document.getElementById('your form id');
for (var i = 0; i < count(frm.elements.length); i++){
if (frm.elements[i].type === 'checkbox'){
frm.elements[i].checked = true;
}
}
}
You just have to call those functions.
Related
I am trying to check boxes in JS. I wan't to only check when the value is equal to 0, if not don't check it. my code :
document.onreadystatechange = function check(e)
{
if (document.readyState === 'complete')
{
var inputElements = document.getElementsByTagName("input");
for(var i=0; i < inputElements.length; ++i)
{
if(document.getElementsByTagName("input")[i].value == "1")
{
document.getElementById("date").checked = false;
}
}
}
}
But it doesn't work. Can you help me?
thanks
What you are doing is, if the checkboxes have value of 1, then you are checking it. Make this change in the code and it should work. Also, you need to check if you are doing this on a checkbox and not on a radio or text:
if(document.getElementsByTagName("input")[i].value == 0 &&
document.getElementsByTagName("input")[i].getAttribute("type") == "checkbox")
{
document.getElementById("date").checked = true;
}
var eles = document.querySelectorAll("input[type='checkbox']");
var len = eles.length,
i = 0,
flag = true;
for (; i < len; i++) {
if (eles[i].value === "1") {
flag = false;
return;
}
}
if (flag) document.getElementById('date').checked = true;
If the value ( 0 or 1 ) is of an <input type='text'>, then change document.querySelectorAll("input[type='checkbox']"); to document.querySelectorAll("input[type='text']");
I need some help with the code below:
<script type="text/javascript">
var opcao = new Array (
document.getElementById("cred_form_1864_1_wpcf-pde_Pesquisas_descontinuadas"),
document.getElementById("cred_form_1864_1_wpcf-pnps_Pesquisas_nao_patenteaveis-sigilosas")
);
function check1(){
if (opcao[0].checked == true){
for (var i = 0; i < opcao.length; i++){
if (i != 0){
opcao[i].checked = false;
opcao[i].disabled = true;
}
}
}
}
function check2(){
if (opcao[1].checked == true){
for (var i = 0; i < opcao.length; i++){
if (i != 1){
opcao[i].checked = false;
opcao[i].disabled = true;
}
}
}
}
</script>
I need to call the array 'opcao' within the functions 'check1 ()' and 'check2 ()'. How can I do this?
====================
I tried the suggestion of Mishik did not work. What I need is that the functions 'check1 ()' and 'check2 ()' to access the same array 'opcao'.
If I write the array within each function the code works perfectly. But how are the same values I would have to repeat the same array for each function created.
If your code is executed before the page is loaded, then opcao array will not actually contain required elements.
You need to wrap your code in window.onload, so that by the time script is executed all the required elements will be available in the document.
window.onload = function() {
var opcao = new Array (
document.getElementById("cred_form_1864_1_wpcf-pde_Pesquisas_descontinuadas"),
document.getElementById("cred_form_1864_1_wpcf-pnps_Pesquisas_nao_patenteaveis-sigilosas")
);
function check1(){
if (opcao[0].checked == true){
for (var i = 0; i < opcao.length; i++){
if (i != 0){
opcao[i].checked = false;
opcao[i].disabled = true;
}
}
}
}
function check2(){
if (opcao[1].checked == true){
for (var i = 0; i < opcao.length; i++){
if (i != 1){
opcao[i].checked = false;
opcao[i].disabled = true;
}
}
}
}
}
Currently I'm using this to check / uncheck all checkboxes in my form.
<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length -2; i++)
{
aa.elements[i].checked = checked;
}
}
</script>
This works well, But I have one check box within this form I don't want to be affected.
It has an id of id='ignore' is there anyway the above code can be used to work as is, but ignore this one checkbox ?
Thanks
for (var i =0; i < aa.elements.length -2; i++)
{
if(aa.elements[i].id !== 'ignore'){
aa.elements[i].checked = checked;
}
}
Get rid of the if loop also...
The full code -
<script type="text/javascript">
var checked = false;
function checkedAll (frm1) {
var chkBoxs = document.getElementById('frm1').getElementsByTagName('input');
checked = !checked;
for (var i =0; i < chkBoxs.length -2; i++) {
if (chkBoxs[i].id == 'ignore') {
continue;
}
chkBxs[i].checked = checked;
}
}
</script>
for (var i =0; i < aa.elements.length -2; i++)
{
if (aa.elements[i].getAttribute('id') != 'ignore')
aa.elements[i].checked = checked;
}
for (var i =0; i < aa.elements.length -2; i++)
{
if (aa.elements[i].getAttribute('id') == 'ignore')
continue;
aa.elements[i].checked = checked;
}
<script type="text/javascript">
checked=false;
function checkedAll (frm1) {
var aa= document.getElementById('frm1');
if (checked == false)
{
checked = true
}
else
{
checked = false
}
for (var i =0; i < aa.elements.length -2; i++)
{
if (aa.elements[i].getAttribute('id') == 'ignore')
aa.elements[i].checked = false;
else
aa.elements[i].checked = checked;
}
}
</script>
I've got a function to select all checkboxes in a table:
<script type="text/javascript">
function checkAll() {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = true;
}
}
}
But I can't get it to uncheck them all if they are checked. How could I do that?
<th width='2%'>Mark</th>";
Also in javascript is it possible to rename "Mark" to "Un-Mark" if I execute checkAll()?
This should do both of the things u want:
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if(elems[i].checked == true){
elems[i].checked = false;
}
else{
elems[i].checked = true;
}
}
}
if(obj.innerHTML == 'Mark') { obj.innerHTML = 'Unmark' }
else { obj.innerHTML = 'Mark' }
}
html:
<th width='2%'>Mark</th>";
1) why don't u use some js framework, like jQuery?
2) to remove checked, use elems[i].removeAttribute('checked') or set elems[i].checked = false;
3) to rename, you have to set it's innerHTML or innerText to Un-Mark
Add a little more logic to see if they're already checked. This will invert their current checked state.
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if (!elems[i].checked) {
elems[i].checked = true;
}
else elems[i].checked = false;
}
}
If you just want to uncheck all, simply use:
elems[i].checked = false;
This will check them all regardless of their current state, or uncheck them all, depending on the current text of "Mark" or "Unmark".
<script type="text/javascript">
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
var state = obj.innerHTML == 'Mark';
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = state;
}
}
obj.innerHTML = state ? 'Mark' : 'Unmark';
}
And then the HTML changes to:
<th width='2%'>Mark</th>";
To uncheck, try:
elems[i].checked = false;
i sugest you use jquery, everything is easier.
with jquery you just have to do something like this (+/-):
$(function(){
$('a.ClassName').click(function(){
var oTbl = $('#tableID');
$('input[type="checkbox"]', oTbl).attr("checked", "checked")
});
})
Javascript loop continue,or break to display?
This is my code use for show or hide some data in table
if (type=='SHOW') {
for(var i = 0; i<list_tr.length; i++) {
document.getElementById(list_tr[i]).style.display = '';
}
else if (type=='SHOW_EXCEPT'){
document.getElementById(list_tr[0]).style.display = 'none';
document.getElementById(list_tr[1]).style.display = '';
for(var i = 2; i<list_tr.length; i++) {
document.getElementById(list_tr[i]).style.display = 'none';
}
}else{
for(var i = 0; i<list_tr.length; i++) {
document.getElementById(list_tr[i]).style.display = 'none';
}
}
In else case:
I want to hidden all but show list_tr[2] iftype=='SHOW_EXCEPT'
How can I do in this case?
thanks
if (type=='SHOW')
{
for(var i = 0; i<list_tr.length; i++)
{
document.getElementById(list_tr[i]).style.display = '';
}
}
else
{
for(var i = 0; i<list_tr.length; i++)
{
if (i==2||type=='SHOW_EXCEPT')
document.getElementById(list_tr[i]).style.display = '';
else
document.getElementById(list_tr[i]).style.display = 'none';
}
}
That should do the trick if I have understood the question correctly
Not sure I understand the question correctly, but it looks like you need else if:
if (type == 'SHOW') {
// Do something
} else if (type == 'SHOW_EXCEPT') {
// Do something else
} else {
// Do something different
}