multiple checkbox javascript

Question

I try to make multiple checkbox with javascript, but my code is not working, my code always checks all boxes

for(var i=0; i<3; i++){
    document.write("<div class='checkbox'><label><input type='checkbox' value='1' onclick='changeText();' >Item</label></div><input type='text' name='myItem' value='0' disabled/><br/>");
}

var item_box = document.getElementsByName('myItem');
var x;
//alert(item_box.length);
function changeText(){
  for(x=0;x<item_box.length;x++){
   if(item_box[x].hasAttribute('checked')){
    item_box[x].value="0";
    item_box[x].setAttribute('checked', true);
    item_box[x].removeAttribute('checked');
    item_box[x].setAttribute('disabled', false);
   } else {
    item_box[x].value="1";
    item_box[x].setAttribute('checked', false);
    item_box[x].setAttribute('disabled', true);
    item_box[x].removeAttribute('disabled');
   }
  }
}

I don't really understand what's your problem, what are you trying to do and what you want. — Alexis
– Alexis, Commented Oct 19, 2016 at 8:08
i make multiple checkbox with textbox,, if i checkbox[] is checked, textbox not disable i can use english fluently, try my code pls, ty — Rizaldy Setiawan H
– Rizaldy Setiawan H, Commented Oct 19, 2016 at 8:10
I would prefer to use a var div = document.createElement("div") and a document.body.appendChild(div) instead of a document.write. It's more clean and better for code maintenance. MDN | Document.createElement() — Canilho
– Canilho, Commented Oct 19, 2016 at 16:34

miken32 · Accepted Answer · 2022-10-04 23:38:41Z

4

    for(var i=0; i<3; i++){
        document.write("<div class='checkbox'><label><input type='checkbox' value='1' onclick='changeText(this,"+i+");' >Item</label></div><input type='text' name='myItem' value='0' disabled/><br/>");
    }
    
    var item_box = document.getElementsByName('myItem');
    
    function changeText(e,i){
        item_box[i].value = e.checked ? 1 : 0;
        item_box[i].disabled = !e.checked;
    }

edited Oct 4, 2022 at 23:38

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Oct 19, 2016 at 8:26

Mamdouh Saeed

2,3231 gold badge12 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mickmackusa Feb 28 at 8:47

Please explain this snippet with the intent to educate.

Deividas · Accepted Answer · 2016-10-19 08:34:21Z

The code below should enable only one input box as you want to.

for(var i=0; i<3; i++){
    document.write("<div class='checkbox'><label><input type='checkbox' value='1' onclick='changeText(this);' >Item</label></div><input type='text' name='myItem' value='0' disabled/><br/>");
}


function changeText(element){
   var inputBox = element.parentElement.parentElement.nextSibling;
    
   if(inputBox.hasAttribute('checked')){
    inputBox.value="0";
    inputBox.setAttribute('checked', true);
    inputBox.removeAttribute('checked');
    inputBox.setAttribute('disabled', false);
   } else {
    inputBox.value="1";
    inputBox.setAttribute('checked', false);
    inputBox.setAttribute('disabled', true);
    inputBox.removeAttribute('disabled');
   }
}

Collectives™ on Stack Overflow

multiple checkbox javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related