javascript checkbox/uncheckbox multiple items in same div

Question

If I have options with checkboxes like this, imag1

I need to know if there is any way in javascript which allows me to do: If I check traumatic, then check non traumatic, then traumatic should be unchecked automatically. Same with the next 2 options. If I check acute, then check chronic automatically, then acute should be unchecked.I should be able to select 2 options also from them- like acute and traumatic or chronic and non-traumatic and so on. All these options are present in the same input id and div. The code to display them is something like this:

if(final_comorb != null && final_comorb.length != 0) {
            for(var i=0; i<final_comorb.length; i++) {
                tableBody += "<tr><td><table>"
                          + "<tr onmouseover=\"mouseOverPara('rrSentencesImg"+index+impression_prefix+i+"','rrSentencesCol"+index+impression_prefix+i+"');\" onmouseout=\"mouseOutPara('rrSentencesImg"+index+impression_prefix+i+"','rrSentencesCol"+index+impression_prefix+i+"');\">"
                          + "<td><div id='rrSentencesCol"+index+impression_prefix+i+"'>"
                          + "<a onmouseover=\"makeDivVisibleRR('rrSentences"+index+impression_prefix+i+"');\" onmouseout=\"makeDivHiddenRR('rrSentences"+index+impression_prefix+i+"');\">"
                          + "<b><font color='#0000FF'><input class='rrPart' id='rrGroup"+index+impression_prefix+i+"' type='checkbox' value='GROUP' onclick='javascript:otherForm(\"rrChkGrp"+index+impression_prefix+i+"\",\"rrGroup"+index+impression_prefix+i+"\");'>"+final_comorb[i][1]
                          + "</font></b></a></div>";

                tableBody += "<div id='rrChkGrp"+index+impression_prefix+i+"' style='display: none; margin-left: 60px;'>";

                for(var j=2; j<final_comorb[i].length; j++) {
                    for(var k=0;k<final_comorb[i][j].length;k++){
                    tableBody += "<br><input class='rrPart"+index+impression_prefix+i+"' id='rrGrp"+index+impression_prefix+i+"Chk"+j+"' type='checkbox'>"+final_comorb[i][j][k];
                    }
                }
}
}

The 7th line(final_comorbi) displays the first level term, in this example Subdural. The 14th line final_comorb[i][j][k] displays these above mentioned options. How do I do this? Thanks in advance.

the design needs checkboxes only. Is there any way this can be implemented with checkboxes? — Sakshi
– Sakshi, Commented Apr 1, 2016 at 2:55
this can be done in a couple ways, you could style radio buttons to look like checkboxes or using jQuery this is not to hard, vanilla JS makes it tough, are you open to either of those options? — omarjmh
– omarjmh, Commented Apr 1, 2016 at 3:00
Sure I can try both options @Omarjmh Can I know how can this be done? — Sakshi
– Sakshi, Commented Apr 1, 2016 at 3:16

Raman · Accepted Answer · 2016-04-01 03:35:42Z

1

If you have to keep checkboxes, see if this fiddle can help.

$(function(){
  var checkboxBinding = {};
  $('[data-binding]').each(function(){
    var $this = $(this);
    var bindingName = $this.data('binding');
    if(checkboxBinding[bindingName] === undefined){
      checkboxBinding[bindingName] = [];
    }
    checkboxBinding[bindingName].push($this);
    $this.on('change', function(){
      if($this.is(':checked')){
        var bindingsArr = checkboxBinding[bindingName];
        bindingsArr.forEach(function(checkboxItem){
          if(checkboxItem !== $this){
            $(checkboxItem).prop('checked', false);
          }
        });
      }
    });
  });
});

answered Apr 1, 2016 at 3:35

Raman

1,28113 silver badges20 bronze badges

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

14 Comments

Sakshi Over a year ago

Hey this answer is amazing! Thanks a lot. One query- in the fiddle you have used data-binding="traumatic-non-traumatic" etc, right. But these values might not always be the same. It depends on what is the value obtained in the final_comorb array, which is different on different runs of the program. Is there any way to make it dynamic?

Raman Over a year ago

Its dynamic currently as well, just be sure to make data-binding value to be same for the checkboxes that you want to combine. And please mark the answer as accepted if it has helped you.

Sakshi Over a year ago

hey by making 'data binding value same', do you mean something like this - final_comorb[0][0][0] and final_comorb[0][0][1] should have same data binding values? Because I look through the array in the for loops as in the code.

Sakshi Over a year ago

When the array populates, my final_comorb[0][0][0] will have traumatic, final_comorb[0][0][1] will have non-tarumatic and so on...

Raman Over a year ago

can you by any way determine which two checkboxes will be binded together? e.g. determining that traumatic and non-traumatic are binded in a way that when one is checked then the other is unchecked.

|

omarjmh · Accepted Answer · 2016-04-01 03:23:55Z

0

This is one way, to style the radio buttons, which have the default functionality you are asking for INTO checkboxes:

HTML:

<label><input type="radio" name="radio"> traumatic</label>
<label><input type="radio" name="radio"> non traumatic 2</label>

<div></div>

<label><input type="radio" name="radio"> acute</label>
<label><input type="radio" name="radio"> chronic 2</label>

I only put that div in there to kick the inputs to the next row

CSS

input[type="radio"] {
    -webkit-appearance: checkbox; 
    -moz-appearance: checkbox;    
}

Example working JSFiddle

answered Apr 1, 2016 at 3:23

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

3 Comments

omarjmh Over a year ago

you can now add some styles to clean it up... good luck, interesting question!

Sakshi Over a year ago

Hey this is a good answer. Thanks for the help. But there is another problem. The thing is I want to select 2 options out of the 5 at the same time, which radio buttons do not allow. The combinations that can be selected together are - Acute and traumatic, acute and non-traumatic, chronic and traumatic, chronic and non-traumatic. The selections that should not be possible together are just 2- acute and chronic, traumatic and non-traumatic. So,if I check acute first and chronic later, then acute should get unchecked automatically. This multiple selections is not possible with radio buttons.

omarjmh Over a year ago

well then you need to do something like that, then try the answer from @Raman, but since he beat me to it, I wont try to snipe his karma and give you essentially the same thing...

Collectives™ on Stack Overflow

javascript checkbox/uncheckbox multiple items in same div

2 Answers 2

14 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related