Question

我的问题非常具体; 我正在构建一个html表，每个单元格中都有一个收音机和几个带有按钮的文本框：

<td>
<br><input type="radio" name="testradio" id="radio1"><label for "radio1">Spline</label></br>
<br><input type="text" name="splfit" id="spl1" value="0.00" class="texthide"><button for "spl1" class="texthide">Choose</button></br>
<br><input type="text" name="splfit" id="spl2" value="0.00" class="texthide"><button for "spl2" class="texthide">Choose</button></br>
<br><input type="text" name="splfit" id="spl3" value="0.00" class="texthide"><button for "spl3" class="texthide">Choose</button></br>
</td>

<td> 
<br><input type="radio" name="testradio" id="radio2"><label for "radio2">Polynome</label></br>
<br><input type="text" name="polyfit" id="spl1" value="0.00" class="texthide"><button for "spl1" class="texthide">Choose</button></br>
<br><input type="text" name="polyfit" id="spl2" value="0.00" class="texthide"><button for "spl2" class="texthide">Choose</button></br>
<br><input type="text" name="polyfit" id="spl3" value="0.00" class="texthide"><button for "spl3" class="texthide">Choose</button></br>
</td>

texthide类在我的css中定义为：

.texthide{
      display:none
}

我尝试了几个JS而没有成功，这就是我希望html如何工作：对于每个单元格，当收音机被激活时，必须在收音机下面显示下面的文本框（仅限这些单元格）以及附加的按钮，替代方法：如何仅在收音机下面的第一个文本框上切换？当从一个无线电切换到另一个无线电时，先前激活的文本框必须消失，并且必须显示附加到当前无线电的文本框。如果可能的话，我想要一个JS表单，不需要知道不同的收音机或文本框ID（基本上只是告诉它，当你激活收音机时显示它下面的所有文本框，直到下一个收音机）。

任何帮助都会受到很大的影响。

Answer 1

你可以在没有JavaScript的情况下完成，只需使用一些CSS，尝试类似的东西：

<td>
<br>
  <input type="radio" name="testradio" id="radio1">
  <label for= "radio1">Spline</label>
  <div class="blockhide">
    </br>
    <br>
    <input type="text" name="splfit" id="spl1" value="0.00" class="texthide"><button for="spl1" class="texthide">Choose</button></br>
    <br><input type="text" name="splfit" id="spl2" value="0.00" class="texthide"><button for "spl2" class="texthide">Choose</button></br>
    <br><input type="text" name="splfit" id="spl3" value="0.00" class="texthide"><button for "spl3" class="texthide">Choose</button></br>
  </div>
</td>

<td> 
  <br>
  <input type="radio" name="testradio" id="radio2">
  <label for="radio2">Polynome</label>
  <div class="blockhide">
    </br>
    <br><input type="text" name="polyfit" id="spl1" value="0.00" class="texthide"><button for "spl1" class="texthide">Choose</button></br>
    <br><input type="text" name="polyfit" id="spl2" value="0.00" class="texthide"><button for "spl2" class="texthide">Choose</button></br>
    <br><input type="text" name="polyfit" id="spl3" value="0.00" class="texthide"><button for "spl3" class="texthide">Choose</button></br>
  </div>
</td>

和

.blockhide {
      visibility: hidden
} 

input[type="radio"]:checked + label + .blockhide {
  visibility: visible;
}

http://codepen.io/anon/pen/njhdC

Answer 2

你可以这样试试：

你的HTML：

<table class="mytable">
<tr>
<td>
<br><input type="radio" name="testradio" id="radio1"><label for "radio1">Spline</label></br>
<br><input type="text" name="splfit" id="spl1" value="0.00" class="texthide"><button for "spl1" class="texthide">Choose</button></br>
<br><input type="text" name="splfit" id="spl2" value="0.00" class="texthide"><button for "spl2" class="texthide">Choose</button></br>
<br><input type="text" name="splfit" id="spl3" value="0.00" class="texthide"><button for "spl3" class="texthide">Choose</button></br>
</td>
<td> 
<br><input type="radio" name="testradio" id="radio2"><label for "radio2">Polynome</label></br>
<br><input type="text" name="polyfit" id="spl1" value="0.00" class="texthide"><button for "spl1" class="texthide">Choose</button></br>
<br><input type="text" name="polyfit" id="spl2" value="0.00" class="texthide"><button for "spl2" class="texthide">Choose</button></br>
<br><input type="text" name="polyfit" id="spl3" value="0.00" class="texthide"><button for "spl3" class="texthide">Choose</button></br>
</td> 
    </tr></table>

你的css保持原样。

你的javascript：

$("input:radio").on("click", function(e){
    $(".mytable button").not(".texthide").addClass("texthide");
    $(".mytable input[type=text]").not(".texthide").addClass("texthide");
    var radio = e.currentTarget;
    $(radio).siblings("input").removeClass("texthide");
    $(radio).siblings("button").removeClass("texthide");
})

Check it out on fiddle

请注意这需要jQuery。

编辑：首先你做的是：

    $(radio).siblings("input").first().removeClass("texthide");
    $(radio).siblings("button").first().removeClass("texthide");

在带有无线电的html表中显示带有相关标签的文本框

2 个答案: