Question

我有三个单选按钮，我希望我的一个单选按钮默认选中并且表单“a”保持打开状态，直到用户点击另一个单选按钮。下面的表格相对于单选按钮改变;

以下是代码：

<label><input type="radio" name="colorCheckbox" value="red" checked> red</label>
<label><input type="radio" name="colorCheckbox" value="green"> green</label>
<label><input type="radio" name="colorCheckbox" value="blue"> blue</label>

<div class="form-a" > </div>
<div class="form-b" > </div>
<div class="form-c" > </div>

Answer 1

这是一个给你一个想法的简单例子（我使用了你的标记）。

基本上，隐藏每个表单并仅显示具有.active类的表单。在无线电输入更改时，使用自定义属性（在本例中为data-id）将.active类添加到正确的表单。

$(document).ready(function() {
  $('.form-switch').on('change', function() {
    $('.form').removeClass('active');
    var formToShow = '.form-' + $(this).data('id');
    $(formToShow).addClass('active');
  });
});

.form {
  display: none;
}
.form.active {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" class="form-switch" name="colorCheckbox" value="red" data-id="a" checked> red</label>
<label><input type="radio" class="form-switch" name="colorCheckbox" value="green" data-id="b"> green</label>
<label><input type="radio" class="form-switch" name="colorCheckbox" value="blue" data-id="c"> blue</label>

<div class="form form-a active"> form a </div>
<div class="form form-b"> form b </div>
<div class="form form-c"> form c</div>

Answer 2

你可以这样做。 https://jsfiddle.net/75a7p9qa/2/

Declare @date_1 char(10)
Declare @cnt int=1
Declare @aktual_cnt int
Declare @Haz nvarchar(max)=''
Declare @Haz_1 nvarchar(max)=''

select *
into test_table_1
from test_table -- Enter your table name

set @date_1=(select top 1 DateTime from test_table_1
order by Datetime )

SET @aktual_cnt=(select count(*) from test_table_1 where DateTime=@date_1)

 while (@cnt<=@aktual_cnt)
 begin
if (@cnt=1)
  begin
    set @Haz_1=(select top 1 Hazards from test_table_1 where DateTime=@date_1)
    set @Haz = @Haz_1
    delete from test_table_1 where DateTime=@date_1 and Hazards=@Haz_1
  end
else  
  begin
    set @Haz_1=(select top 1 Hazards from test_table_1 where DateTime=@date_1)
    set @Haz = @Haz + ','+@Haz_1
    delete from test_table_1 where DateTime=@date_1 and Hazards=@Haz_1
  end


SET @cnt=@cnt+1


end
drop table test_table_1
select @Haz

Answer 3

更简单（使用jQuery）：https://jsfiddle.net/0s96dgq8/

HTML：

<label><input type="radio" name="colorCheckbox" value="red" checked> red</label>
<label><input type="radio" name="colorCheckbox" value="green"> green</label>
<label><input type="radio" name="colorCheckbox" value="blue"> blue</label>

<div class="form form-red">red</div>
<div class="form form-green">green</div>
<div class="form form-blue">blue</div>

JavaScript的：

function selectForm() {
  $("div.form").hide();
  $("div.form-" + $("input:checked").val()).show();
}
selectForm();
$("input").click(function(){selectForm()});

如何在不同的单选按钮上打开不同的表单

3 个答案: