javascript - yesno check is not working in jsp -
i have below jsp yesnocheck works slot specific search condition not working product search
<td>slot search</td> <td> <input type="radio" onclick="javascript:yesnocheck();" name="yesno" id="yescheck"/>yes <input type="radio" onclick="javascript:yesnocheck();" name="yesno" id="nocheck"/>no <div id="ifyes" style="display:none"> slot start time: <input type='text' id='start' name='starttime'><br> slot end time: <input type='text' id='end' name='endtime'><br> </div> </td> </tr> <tr> <td>product search</td> <td> <input type="radio" onclick="javascript:yesnocheck();" name="yesno1" id="yescheck1"/>yes <input type="radio" onclick="javascript:yesnocheck();" name="yesno1" id="nocheck1"/>no <div id="ifyes" style="display:none"> product number: <input type='text' id='yes' name='yes'><br> </div> </td> </tr>
below javascript function
function yesnocheck() { if (document.getelementbyid('yescheck').checked) { document.getelementbyid('ifyes').style.display = 'block'; } else document.getelementbyid('ifyes').style.display = 'none'; } function yesnocheck1() { if (document.getelementbyid('yescheck1').checked) { document.getelementbyid('ifyes1').style.display = 'block'; } else document.getelementbyid('ifyes1').style.display = 'none'; }
what doing work here , how can enable multiple yesno check option based on user input ?
i've tided code little , added value
attributes , event listener each of radio buttons.
var checkboxes = document.queryselectorall( 'input[type="radio"]' ); for(var = 0; < checkboxes.length; i++ ){ checkboxes[i].addeventlistener( 'change', function(e){ console.log( "you changed " + e.target.name + " option " + e.target.value ); // result if( e.target.name === slot && e.target.value === "yes" ){ ... } }); }
<tr> <td>slot search</td> <td> <input type="radio" name="slot" id="slot_yes" value="yes" />yes <input type="radio" name="slot" id="slot_no" value="no" />no <div id="ifyes" style="display:none"> slot start time: <input type='text' id='start' name='starttime'> <br> slot end time: <input type='text' id='end' name='endtime'> <br> </div> </td> </tr> <tr> <td>product search</td> <td> <input type="radio" name="product" id="product_yes" value="yes" />yes <input type="radio" name="product" id="product_no" value="no" />no <div id="ifyes" style="display:none"> product number: <input type='text' id='yes' name='yes'> <br> </div> </td> </tr>
Comments
Post a Comment