jeudi 14 septembre 2017

jQuery change Dropdown-Menu for checked Radio-Buttons and Checkboxes

I have two diffrent Radio-Buttons and Checkboxes, which are created dynamicly for each row in a table. The two Radio-Buttons are options the user can choose for changeing a Dropdown-Menu by checking its checkbox. Here is a Code-Snippet:

// handle Option 2 
// only if yes enable selection 
$(document).ready(function(){
  $('input[name="op2"]').click(function() {
    if($('input[name="op2"]').is(':checked')) { 
      var op2Vaule = $('input[name="op2"]:checked').val();
      
      if(op2Vaule == "1"){
        document.getElementById("multi_op2").disabled = false;
      } 
      else {
        document.getElementById("multi_op2").disabled = true;
      }
    }
  });
});   



$(document).bind("change","input[type=radio]",function(){
  $('input[name="fw_filter"]').click(function(){
    //  ID of checked Radio-Button 
    var checked_filter_id = $('input[name=fw_filter]:checked').attr('id');
    
    // For-loop size of table rows
    for(var i = 0; i < 3; i++){
      // which id is checked
      var comp_with_filter_id = "filter_id_" + i;
      
      if(comp_with_filter_id == checked_filter_id){
        // if checkbox in row is checked
        var fw_select_id = "fw_select_" + i;
        
        // some ajax not included here
        // for test just change the values of dropdown
        var op1Value = $("input[name='op1']:checked").val();
        if(op1Value == ""){
          op1Value = "all";
        }
        var op2Value = $("input[name='op2']:checked").val();
        if(op2Value == ""){
          op2Value = "all";
        }
        
        // depending on selected radio button 
        // change the dropdownmenu for selected checkbox in same row
        if(op1Value != "" || op2Value != ""){
          document.getElementById(fw_select_id).innerHTML = "change_all";
        }
      }
    }
  });      
});
<script src="http://ift.tt/AbJPU3"></script>
<h2> Options </h2>
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
      <table align="left" border="1" style =" margin:10px";>
        <thead>
          <tr>
            <th> Option 1: </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="radio" id="op1_all" name="op1" value="all" checked > <label for="op1_all"> all</label>
            </td>
          </tr>
          <tr>
            <td>
              <input type="radio" id="op1_yes" name="op1" value="1" > <label for="op1_yes">yes</label>
            </td> 
          </tr> 
          <tr>  
            <td>  
              <input type="radio" id="op1_no"  name="op1" value="0" > <label for="op1_no">no</label>
            </td>
          </tr>
        </tbody>
      </table>
      
      <table align="left" border="1" style =" margin:10px";>
        <thead>
          <tr>
            <th colspan="3"> Option 2 </th>
          </tr>
        </thead>
        <tbody>
          <tr> 
            <td> 
              <input type="radio" id="op2_all"  name="op2"  value="all"  checked> <label for="op2_all"> all</label>
            </td>
            <td rowspan="3">
              <select multiple size=5 name="multi_op2[]" id="multi_op2" style="width: 300px;" disabled>
                <option value="multi1"> Multi 1 </option>
                <option value="multi2"> Multi 2 </option>
                <option value="multi3"> Multi 3 </option>
              </select>
            </td>
          </tr> 
          <tr> 
            <td>
              <input type="radio" id="op2_yes" name="op2" value="1" ><label for="op2_yes">yes</label>
            </td>                               
          </tr>                                 
          <tr>                                  
            <td>                                
              <input type="radio" id="op2_no" name="op2"  value="0" ><label for="op2_no">no</label> 
            </td>
          </tr>
        </tbody>
      </table>
    </form>
    
<br><br><br><br><br><br><br><br>
    
    
<h2> Table of Content </h2>
    <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
      <table align="left" border="1" style =" margin:10px";>
        <thead>
          <tr>
            <th> column 1 </th>
            <th> column 2 </th>
            <th> column 3 </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p> Content 1</p>
            </td>
            <td>
              <select name="content_row_0" size="1" id="fw_select_0" >
                <option value="id1"> Response </option>
                <option value="id2"> Response </option>
                <option value="id3"> Response </option>
              </select>
              <input type="checkbox" id="filter_id_0"  name="fw_filter" value="filter_id_0"><label for="filter_id_0"> Filter Options</label>
            </td>
            <td>
            <p> Content 3</p>
            </td>
          </tr>
          <tr>
            <td>
              <p> Content 1</p>
            </td>
            <td>
              <select name="content_row_1" size="1" id="fw_select_0" >
                <option value="id1"> Response </option>
                <option value="id2"> Response </option>
                <option value="id3"> Response </option>
              </select>
              <input type="checkbox" id="filter_id_1"  name="fw_filter" value="filter_id_1"><label for="filter_id_1"> Filter Options</label>
            </td>
            <td>
            <p> Content 3</p>
            </td> 
          </tr> 
          <tr>  
            <td>
              <p> Content 1</p>
            </td>
            <td>
              <select name="content_row_2" size="1" id="fw_select_0" >
                <option value="id1"> Response </option>
                <option value="id2"> Response </option>
                <option value="id3"> Response </option>
              </select>
              <input type="checkbox" id="filter_id_2"  name="fw_filter" value="filter_id_2"><label for="filter_id_2"> Filter Options</label>
            </td>
            <td>
            <p> Content 3</p>
            </td>
          </tr>
        </tbody>
      </table>

So what I want is that Dropdown-Menu change it's value depending on the checked Radio-Buttons for the row or rows the Checkbox ist selected in.

With every change on a Radio-Button, the Dropdown-Menu for every clicked Checkboxes should change its value.

When the page is loaded and I click a Checkbox it don't effect the Dropdown-Menu. Only if I change it again.

Example:

  1. I don't change Option 1 and check no for Option 2 (dosn't effect to any thing)

  2. Check the Checkbox in the second row (content of Dropdown-Menu should change)

  3. Change Option 1 to yes (content of second row should change)

  4. Click the Checkbox in first row (content of Dropdown should be the same like Dropdown in second row)

  5. Uncheck the Checkbox in second row (content of Dropdown-Menu should return to default and Dropdown-Menu in first row should be the same)




Aucun commentaire:

Enregistrer un commentaire