javascript radio button

问题

I am trying to make some project in which i want a text box to be displayed when I select expert button and no text box when i click on learner button....

I have written this code but not able to get the problem... Plz some help...

<html>
<head>
<script language="javascript"> 

function toggleContent(showHideDiv, switchTextDiv) {
    var text = document.getElementById(showHideDiv);
    var ele = document.getElementById(switchTextDiv);
    var rad_val='';
    for (var i=0; i < document.text.role.length; i++)
    {
        if (document.text.role[i].checked)
        {
            rad_val = document.text.role[i].value;
        }
    }   

    if(rad_val=='learner'){
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
}
</script>
</head>
<body>
<table>
  <tr >
    <td  ><option value="1"> 1 </option>
    </td>
    <td> Role </td>
    <form id="form1">
      <td><label>
        <input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
        Expert </label>
    </form>
<td ><div ID="div1" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>  
  </tr>
  <tr >
    <td  ><option value="2"> 2 </option>
    </td>
    <td> Role </td>
    <form id="form2">
      <td><label>
        <input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
        Expert </label>
      </td>
    </form>
    <td ><div ID="div2" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
  </tr>
</table>
</body>
</html>

回答1:

you can do like this:

<script language="javascript"> 
function toggleContent(showHideDiv, switchTextDiv) {
var text = document.getElementById(showHideDiv);
var ele = document.getElementById(switchTextDiv);
var rad_val='';
var obj=text.getElementsByTagName("input");
for (var i=0; i < obj.length; i++)
{
    if (obj[i].checked)
    {
        rad_val = obj[i].value;
    }
}  
if(rad_val.indexOf("learner")!=-1){
        ele.style.display = "block";
}
else {
    ele.style.display = "none";
}
}
</script>

回答2:

You have some mistakes in the logic of your code and the way you retrieve the form elements.

Instead of fixing your code I would suggest revising the whole logic.

Better practice is binding the click event via code, not inline from within each input tag. Also, after clicking a radio button (also triggered from selecting with keyboard) you can assume for sure the selected value of the whole radio group is the value of the clicked button.

Here is the required code to achieve same effect:

window.onload = function() {
    var oDiv = document.getElementById("div2");
    var arrRoleButtons = document.getElementsByName("role");
    for (var i = 0; i < arrRoleButtons.length; i++) {
        var oCurrentRole = arrRoleButtons[i];
        oCurrentRole.onclick = function() {
            oDiv.style.display = (this.value === 'learner') ? "block" : "none"; 
        }
    }
};

Having this, you no longer need to call onclick from within the tags:

<input type="radio" name="role" value='learner' />
<input type="radio" name="role" value='expert' />

Live test case.

回答3:

if(rad_val=='learner'){ 
        ele.style.display = "block"; 
} 
else { 
    ele.style.display = "none"; 
}

there is no value equals to learner, but learner1 or learner2

try this:

function toggleContent(showHideDiv, switchTextDiv) {
    var text = document.getElementById(showHideDiv);
    var ele = document.getElementById(switchTextDiv);
    var rad_val = '';
    var pattern = /\d+/g;
    var a=pattern.exec(showHideDiv);

    for (var i = 0; i < document.forms[showHideDiv].role.length; i++) {
        if (document.forms[showHideDiv].role[i].checked) {
            rad_val = document.forms[showHideDiv].role[i].value;
        }
    }
    if (rad_val == 'learner' + a) {

        ele.style.display = "block";
    }
    else {

        ele.style.display = "none";
    }
}

回答4:

This is the solution. Thanks @dragon66 to solve my issue.

function toggleContent(showHideDiv, switchTextDiv) {
    var text = document.getElementById(showHideDiv);
    var ele = document.getElementById(switchTextDiv);
    var rad_val='';
    for (var i=0; i < text.role.length; i++)
    {
        if (text.role[i].checked)
        {
            rad_val = text.role[i].value;
        }
    }   

    if(rad_val=='learner'){
            ele.style.display = "block";
    }
    else {
        ele.style.display = "none";
    }
}
</script>
</head>
<body>
<table>
  <tr >
    <td  ><option value="1"> 1 </option>
    </td>
    <td> Role </td>
    <form id="form1">
      <td><label>
        <input type="radio" name="role" value='learner' onClick="toggleContent('form1','div1')" >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick="toggleContent('form1','div1')" >
        Expert </label>
    </form>
<td ><div ID="div1" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>  
  </tr>
  <tr >
    <td  ><option value="2"> 2 </option>
    </td>
    <td> Role </td>
    <form id="form2">
      <td><label>
        <input type="radio" name="role" value='learner' onClick=toggleContent('form2','div2') >
        Learner </label>
      </td>
      <td><label>
        <input type="radio" name="role" value='expert' onClick=toggleContent('form2','div2') >
        Expert </label>
      </td>
    </form>
    <td ><div ID="div2" align=right style="display:none;">
        <label class="labell labelUser" >why?</label>
        <textarea name="description" align="right" id="description"  cols="40" rows="5" class="inputbox">Why?</textarea>
        <span id="descriptionError" class="notifyForUser" spanError></span> </div></td>
  </tr>
</table>
</body>
</html>

来源：https://stackoverflow.com/questions/10926940/javascript-radio-button

标签

javascript

radio-button