dependent radio button

Hi. I have 4 radio buttons say all,chocolate,cookie,icecream. If I select all the other 3 should not able to be selected. If I select any 1 or 2 among chocolate,cookie,icecream , all should not able to be selected. I should not able to select the three chocolate,cookie,icecream. If I try to select these three an alert box should be raised saying please select the all option and the already selected options should be deselected. How to do this in javascript. Thanks in advance.

View Answers

January 31, 2013 at 3:28 PM

hi friend,

The feature of the Radio Button is to select only one option at a time. So you don't need to validate them from selecting more than one options if you want to select the multiple options you can use the checkbox.

January 31, 2013 at 9:24 PM

ya checkbox is better for this.

I found out the answer. Here am pasting the code. But instead of chocolate,cookie,icecream I just used b,f,j.

<script language="javascript">

function valid(form1) {

if(document.form1.all.checked == true)
{   
    document.form1.b.disabled=true;
    document.form1.f.disabled=true;
    document.form1.j.disabled=true;
    document.form1.b.checked=false;
    document.form1.f.checked=false;
    document.form1.j.checked=false;
    return true;
}

if(document.form1.b.checked == true && document.form1.f.checked == true && document.form1.j.checked == true)
{
    alert("All selected");
    document.form1.all.checked=true;
    document.form1.b.disabled=true;
    document.form1.f.disabled=true;
    document.form1.j.disabled=true;
    document.form1.all.disabled=false;
    document.form1.b.checked=false;
    document.form1.f.checked=false;
    document.form1.j.checked=false;
    return true;
}
if(document.form1.all.checked == false)
{   
    document.form1.b.disabled=false;
    document.form1.f.disabled=false;
    document.form1.j.disabled=false;
    return true;
}

}

<body>
<form name="form1" method="post" action="" onSubmit="return valid(this);">
  <p>
 <input type="checkbox" name="all" value="checkbox" onClick="valid(form1);">  All</p>
  <p>
    <input type="checkbox" name="b" value="checkbox" onClick="valid(form1);">   b    </p>
  <p>
    <input type="checkbox" name="f" value="checkbox" onClick="valid(form1);">       f</p>
  <p>
     <input type="checkbox" name="j" value="checkbox" onClick="valid(form1);">     j</p>
  <p>    <input type="submit" name="Submit" value="Submit">  </p>
</form>
</body>