mardi 26 octobre 2021

final radio button - detection in multiple groups

I am new in javascript and here but I need help. Is there a way to detect the selection of the last radio button by tracking multiple groups? For example... I have several groups of buttons (5 in example). There are several buttons in each group. (in original project 18 in total, of which 9 are ordinary and 9 are double). Each button in the group has its "characteristics", ie. a specific button can “disable” the next entire group. I want if I check the "double" button that it disables the whole group but that other group is considered as if something of it was selected. Or to clarify ... Below in the specification there is a list of selected buttons. I need to get a display of the final "div" after selecting all the fields in the specification, I named it "box" ih html. In the given example I showed how it would go for groups 1 and 2 (although it doesn’t work well) but to figure out what I need.

The tricky part is that the user can (must) go back to change their selection. Then there is a “refutation” of previous selections, especially if “double” buttons have been selected.

I'm interested in how to solve this whole situation and as for the display of the button name in the specification, also how to select the final "box" after selecting all the buttons.

From here you can download html code and javascript: https://www.dropbox.com/s/awj3t389xmrvmit/checkRadioGroup.rar?dl=0

// GROUP 1 

function GROUP_1_select_1(){
    var check_poz_1 = document.getElementById("check_poz_1");
    var check_poz_2 = document.getElementById("check_poz_2");
    var check_poz_3 = document.getElementById("check_poz_3");

    var choice_1 = document.getElementById("choice_1");
    var choice_2 = document.getElementById("choice_2");
    var choice_3 = document.getElementById("choice_3");

    choice_1.value = 'GROUP 1 - ONE';
    document.getElementById("check_poz_1").checked = true;
    document.getElementById("row_1").innerHTML = "1";
    document.getElementById("row_2").innerHTML = "2";
    document.getElementById("group_2_button_1").disabled = false;
    document.getElementById("group_2_button_2").disabled = false;
    document.getElementById("group_2").style.backgroundColor = "white";
    call_final_box();
    if (check_poz_2.checked == true && choice_2.value == '') {
        document.getElementById("check_poz_2").checked = false;
    } 
    if (check_poz_2.checked == false){
        document.getElementById("check_poz_2").checked = false;
        choice_2.value = '';
    }
    if (choice_3.value == '' && choice_2.value == ''){
        choice_2.value = '';
    }
    if (choice_2.value != '' && choice_3.value == ''){
        document.getElementById("row_2").innerHTML = "2 and 3";
    }
}

function GROUP_1_select_2(){
    var check_poz_1 = document.getElementById("check_poz_1");
    var check_poz_2 = document.getElementById("check_poz_2");

    var choice_1 = document.getElementById("choice_1");
    var choice_2 = document.getElementById("choice_2");
    var choice_3 = document.getElementById("choice_3");
    var check_poz_3 = document.getElementById("check_poz_3");

    document.getElementById("check_poz_1").checked = true;
    document.getElementById("check_poz_2").checked = true;
    document.getElementById("row_1").innerHTML = "1 and 2";
    document.getElementById("row_2").innerHTML = "row 2 will be hidden but must be considered as filled"; // just info
    choice_1.value = 'GROUP 1 - DOUBLE';
    choice_2.value = '';
    document.getElementById("group_2_button_1").disabled = true;
    document.getElementById("group_2_button_2").disabled = true;
    document.getElementById("group_2_button_1").checked = false; 
    document.getElementById("group_2_button_2").checked = false;  
    document.getElementById("group_2").style.backgroundColor = "lightgrey";
    call_final_box();
    if (check_poz_2.checked == true){
        document.getElementById("group_3_button_1").disabled = true;
        document.getElementById("group_3_button_2").disabled = true;
        document.getElementById("group_3_button_1").checked = false; 
        document.getElementById("group_3_button_2").checked = false;
        document.getElementById("group_3").style.backgroundColor = "white"; 
    }
    if (check_poz_3.checked == true){
        document.getElementById("group_3").style.backgroundColor = "white"; 
        document.getElementById("check_poz_3").checked = false;
        document.getElementById("row_3").innerHTML = "3";
    }
}


// GROUP 2


function GROUP_2_select_1(){
    var check_poz_2 = document.getElementById("check_poz_2");
    var check_poz_3 = document.getElementById("check_poz_3");
    var check_poz_4 = document.getElementById("check_poz_4");

    var choice_2 = document.getElementById("choice_2");
    var choice_3 = document.getElementById("choice_3");

    choice_2.value = 'GROUP 2 - ONE';
    document.getElementById("check_poz_2").checked = true;
    document.getElementById("row_2").innerHTML = "2";
    document.getElementById("row_3").innerHTML = "3";
    document.getElementById("group_3_button_1").disabled = false;
    document.getElementById("group_3_button_2").disabled = false;
    document.getElementById("group_3").style.backgroundColor = "white";
    call_final_box();
    if (check_poz_3.checked == true && choice_3.value == '') {
        document.getElementById("check_poz_3").checked = false;
    } 
    if (check_poz_3.checked == false){
        document.getElementById("check_poz_3").checked = false;
        choice_3.value = '';
    }
    if (check_poz_3.checked == true && choice_4.value == ''){
        document.getElementById("check_poz_3").checked = true;
        document.getElementById("row_3").innerHTML = "3 and 4";
        choice_3.value = 'GROUP 2 - DOUBLE';
        document.getElementById("check_poz_4").checked = true;
    document.getElementById("row_4").innerHTML = "row 4 will be hidden but must be considered as filled"; // just info
}

}

function GROUP_2_select_2(){
    var check_poz_2 = document.getElementById("check_poz_2");
    var check_poz_3 = document.getElementById("check_poz_3");
    var check_poz_4 = document.getElementById("check_poz_4");

    var choice_2 = document.getElementById("choice_2");
    var choice_3 = document.getElementById("choice_3");

    document.getElementById("check_poz_2").checked = true;
    document.getElementById("check_poz_3").checked = true;
    document.getElementById("row_2").innerHTML = "2 and 3";
    document.getElementById("row_3").innerHTML = "row 3 will be hidden but must be considered as filled"; // just info
    choice_2.value = 'GROUP 2 - DOUBLE';
    choice_3.value = '';
    document.getElementById("group_3_button_1").disabled = true;
    document.getElementById("group_3_button_2").disabled = true;
    document.getElementById("group_3_button_1").checked = false; 
    document.getElementById("group_3_button_2").checked = false;  
    document.getElementById("group_3").style.backgroundColor = "lightgrey";
    call_final_box();
    if (check_poz_3.checked == true){
        document.getElementById("group_4_button_1").disabled = true;
        document.getElementById("group_4_button_2").disabled = true;
        document.getElementById("group_4_button_1").checked = false; 
        document.getElementById("group_4_button_2").checked = false;
        document.getElementById("group_4").style.backgroundColor = "white"; 
    }
    if (check_poz_4.checked == true){
        document.getElementById("group_4").style.backgroundColor = "white"; 
        document.getElementById("check_poz_4").checked = false;
        document.getElementById("row_4").innerHTML = "4";
    }
}


// call final box after all checbox are checked by button from groups

function call_final_box(){

    var $checks = $('input[name=check_name_specif]:checkbox');
    var numChecked = $checks.filter(':checked').length;

    if (numChecked == 5) {
        document.getElementById("box").style.display = 'flex';
    } else {
        document.getElementById("box").style.display = 'none';
    }
}
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <script src="myScript.js" type="text/javascript">></script>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style type="text/css"></style>
  <style>
    body {
    width: auto;
    font: sans-serif;
    font-size: 13px;
    font-weight: bold;
  }

  .box{
    width: 500px;
    height: 250px;
    background-color: red;
    display: flex;
  }

  .specification{
    display: flex;
    flex-direction: column;
  }

  .list{
    display: flex;
    justify-content: space-around;
  }

  .group{
    text-align: center;
  }

  </style>
 </head>
<body>
<div class="list">

  <div id="group_1" class="group">GROUP 1<br>
    <label>
    <input type="radio" name="group_1" onclick="GROUP_1_select_1()" id="group_1_button_1" value="GROUP 1 - selected 1">GROUP 1 - ONE</label>
    <br>
    <label>
    <input type="radio" name="group_1" onclick="GROUP_1_select_2()" id="group_1_button_2" value="GROUP 1 - selected 1-2">GROUP 1 - DOUBLE</label>
    <br>
  </div>

  <div id="group_2" class="group">GROUP 2<br>  
    <label>
    <input type="radio" name="group_2" onclick="GROUP_2_select_1()" id="group_2_button_1" value="GROUP 2 - selected 1">GROUP 2 - ONE</label>
    <br>
    <label>
    <input type="radio" name="group_2" onclick="GROUP_2_select_2()" id="group_2_button_2" value="GROUP 2 - selected 2-3">GROUP 2 - DOUBLE</label>
    <br>
  </div>

  <div id="group_3" class="group">GROUP 3<br>  
    <label>
    <input type="radio" name="group_3" onclick="GROUP_3_select_1()" id="group_3_button_1" value="GROUP 3 - selected 1">GROUP 3 - ONE</label>
    <br>
    <label>
    <input type="radio" name="group_3" onclick="GROUP_3_select_2()" id="group_3_button_2" value="GROUP 3 - selected 3-4">GROUP 3 - DOUBLE</label>
    <br>
  </div>

  <div id="group_4" class="group">GROUP 4<br>  
    <label>
    <input type="radio" name="group_4" onclick="GROUP_4_select_1()" id="group_4_button_1" value="GROUP 4 - selected 1">GROUP 4 - ONE</label>
    <br>
    <label>
    <input type="radio" name="group_4" onclick="GROUP_4_select_2()" id="group_4_button_2" value="GROUP 4 - selected 4-5">GROUP 4 - DOUBLE</label>
    <br>
  </div>

  <div id="group_5" class="group">GROUP 5<br> 
    <label>
    <input type="radio" name="group_5" onclick="GROUP_5_select_1()" id="group_5_button_1" value="GROUP 5 - selected 1">GROUP 5 - ONE</label>
    <br>
  </div>

</div>
<br>
<br>

<form name="specification">
  <div class="specification">
    <div >
    <input type="checkbox" class="check_specif" name="check_name_specif" id="check_poz_1" disabled="disabled">
    <label id="row_1">1</label>
    <input type="text" class="checkbox" name="choice" id="choice_1" placeholder="not selected" disabled="disabled">
    </div>

    <div >
    <input type="checkbox" class="check_specif" name="check_name_specif" id="check_poz_2" disabled="disabled">  
    <label id="row_2">2</label>
    <input type="text" class="checkbox" name="choice" id="choice_2" placeholder="not selected" disabled="disabled">
    </div>

    <div >
    <input type="checkbox" class="check_specif" name="check_name_specif" id="check_poz_3" disabled="disabled">
    <label id="row_3">3</label>
    <input type="text" class="checkbox" name="choice" id="choice_3" placeholder="not selected" disabled="disabled">
    </div>

    <div >
    <input type="checkbox" class="check_specif" name="check_name_specif" id="check_poz_4" disabled="disabled">
    <label id="row_4">4</label>
    <input type="text" class="checkbox" name="choice" id="choice_4" placeholder="not selected" disabled="disabled">
    </div>

    <div >
    <input type="checkbox" class="check_specif" name="check_name_specif" id="check_poz_5" disabled="disabled">
    <label id="row_5">5</label>
    <input type="text" class="checkbox" name="choice" id="choice_5" placeholder="not selected" disabled="disabled">
    </div>
  </div>
</form>

<br><br>
  <p>INSTRUCTIONS</p>
  <p>If you check "button_2" this is considered a selection for two groups.</p>
  <p>Once all the rows have been selected it is necessary to display the final "box".</p>
  <p>The program must always know when the LAST field is filled in to display the "box".</p> 
  <p>The user can choose the order of filling and make changes. These changes dictate which fields will be filled.</p>
  <p>If any row have "not selected" the "box" will not be visible</p>
  <div class="box" id="box" style="display: none"></div>
</div>

</body>



Aucun commentaire:

Enregistrer un commentaire