Six radio choices, each of which has three check boxes. After selecting one of the radio choices, only the corresponding

lovelovelove

Six radio choices, each with three check boxes, after selecting one of them, only the corresponding three check boxes can be selected. , And if another radio is selected again, the check boxes that can be selected are changed accordingly.

hannah2222

js control

lovelovelove

How to get it? Not very good, can you help to make it clear?
thank you !

fatfat1102

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>New page 1</title>
<script>

function radioClick(radio){
The
if(radio=="radio1"){
The
var checks=document.getElementsByName("checkbox1");
for(i=0;i<checks.length;i++){
The
checks[i].disabled=null;
}
var checks=document.getElementsByName("checkbox2");
for(i=0;i<checks.length;i++){
The
checks[i].disabled=true;
}
}
else if(radio=="radio2"){
alert("ff");
var checks=document.getElementsByName("checkbox2");
for(i=0;i<checks.length;i++){
The
checks[i].disabled=null;
}
var checks=document.getElementsByName("checkbox1");
for(i=0;i<checks.length;i++){
The
checks[i].disabled=true;
}
}
The
}
</script>
</head>

<body>
<input type="radio" id="rd" name="rd" value="radio1" onclick="radioClick(this.value);">radio1
<input type="checkbox" name="checkbox1" value="checkbox1-1">checkbox1-1
<input type="checkbox" name="checkbox1" value="checkbox1-2">checkbox1-2
<input type="checkbox" name="checkbox1" value="checkbox1-3">checkbox1-3
<input type="radio" id="rd" name="rd" value="radio2" onclick="radioClick(this.value);">radio2
<input type="checkbox" name="checkbox2" value="checkbox2-1">checkbox2-1
<input type="checkbox" name="checkbox2" value="checkbox2-2">checkbox2-2
<input type="checkbox" name="checkbox2" value="checkbox2-3">checkbox2-3
</body>

</html>

echosl

Can be achieved with the disabled attribute of checkbox

liteding

Limit it with JS, a checkbox with the same name is a group
Then select one of the group, and change the others to disable.

chma5000

A simple
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <SCRIPT LANGUAGE="JavaScript">
function test(){
var c0=document.getElementsByName('c0');
var c1=document.getElementsByName('c1');
var one=document.getElementsByName('one');
if(one[0].checked){
for(i=c0.length;i>0;i--) {c1[i-1].checked=false;c0[i-1].checked=true;}
}
if(one[1].checked){
for(i=c1.length;i>0;i--) {c0[i-1].checked=false;c1[i-1].checked=true;}
}
}

  </SCRIPT>
</HEAD>

<BODY>
<INPUT TYPE="radio" NAME="one" onclick=test() /><INPUT TYPE="checkbox" NAME="c0"><INPUT TYPE="checkbox" NAME="c0"><INPUT TYPE=" checkbox" NAME="c0"><br>
<INPUT TYPE="radio" NAME="one" onclick=test() /><INPUT TYPE="checkbox" NAME="c1"><INPUT TYPE="checkbox" NAME="c1"><INPUT TYPE=" checkbox" NAME="c1"><br>
</BODY>
</HTML>

chma5000

Sorry, the above does not meet the requirements of the landlord to disable the rest

lovelovelove

thank you very much! Well done

shenjiaen

I’ll give you one. I’m looping through this. Be careful when naming the checkbox.
&#65279;<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <SCRIPT LANGUAGE="JavaScript">
function check(){
var radio=document.getElementsByName('radio');
for(flag=0;flag<radio.length;flag++)
{
if(radio[flag].checked){
var res = "chk"+flag;
var checkbox = document.getElementsByName(res);
for(i=0;i<checkbox.length;i++)
{
checkbox[i].checked=true;
checkbox[i].disabled = false;
}
}
else
{
var res = "chk"+flag;
var checkbox = document.getElementsByName(res);
for(i=0;i<checkbox.length;i++)
{
checkbox[i].checked=false;
checkbox[i].disabled =true;
}
}
}
}

  </SCRIPT>
</HEAD>

<BODY>
<INPUT type="radio" name="radio" onclick=check() />
<!--
   The checkboxes are all chk plus the index of the radio box they belong to
   For example here
   The radio box is a radio group with an index of 0; so the checkbox is called chk0
   The same is true below
-->
<INPUT type="checkbox" name="chk0">
<INPUT type="checkbox" name="chk0">
<INPUT type="checkbox" name="chk0">
<br>
<INPUT type="radio" name="radio" onclick=check() />
<INPUT type="checkbox" name="chk1">
<INPUT type="checkbox" name="chk1">
<INPUT type="checkbox" name="chk1">
<br>
<INPUT type="radio" name="radio" onclick=check() />
<INPUT type="checkbox" name="chk2">
<INPUT type="checkbox" name="chk2">
<INPUT type="checkbox" name="chk2">
<br>
<INPUT type="radio" name="radio" onclick=check() />
<INPUT type="checkbox" name="chk3">
<INPUT type="checkbox" name="chk3">
<INPUT type="checkbox" name="chk3">
<br>
<INPUT type="radio" name="radio" onclick=check() />
<INPUT type="checkbox" name="chk4">
<INPUT type="checkbox" name="chk4">
<INPUT type="checkbox" name="chk4">
<br>
<INPUT type="radio" name="radio" onclick=check() />
<INPUT type="checkbox" name="chk5">
<INPUT type="checkbox" name="chk5">
<INPUT type="checkbox" name="chk5">
<br>
</BODY>
</HTML>