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:
-
I don't change Option 1 and check no for Option 2 (dosn't effect to any thing)
-
Check the Checkbox in the second row (content of Dropdown-Menu should change)
-
Change Option 1 to yes (content of second row should change)
-
Click the Checkbox in first row (content of Dropdown should be the same like Dropdown in second row)
-
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