javascript - 选中单选时，将 required 添加到隐藏 div 的输入

Question

我想做的是设置隐藏的div，其输入取决于检查的 radio 输入。

这是逻辑:

1. 如果选中第一个单选按钮，则会显示第一个 div，我想在其中添加带有某些值的隐藏输入...

2. 如果选中第二个单选按钮，我希望添加必需的输入。

3. 而且，如果未检查第二个 radio ，则不需要...

我已经尝试了一段时间的一些事情并得到了一些效果，但无法让它按我想要的方式工作，这是我当前正在尝试使用的代码，抱歉，但它搞砸了并且失败了。 ..

因此，任何帮助将不胜感激......

/*
        // this code is working but I messed the HTML while trying to get it work with the other code below...
        $(document).ready(function() {
        	$("div.hiddendiv").hide();
        	check();
          
          $("input[name$='name02']").change(check);
        	  function check() {
        		  var test = $("input[name$='name02']:checked").val();
        			$("div.hiddendiv").hide();
        			$("#" + test).show();
        		 }
        }
        */

// The code i'm trying to work with...
$(function() {
  var radio = $("#closed");
  var hidden = $("#hide");
  hidden.hide();
  checkbox.change(function() {
    if (checkbox.is(':checked')) {
      hidden.show();
      //add required
      $('#name02').prop('required', true);
    } else {
      hidden.hide();
      //clear when hidden checked
      $("#name02").val("");
      //remove required
      $('#name02').prop('required', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open

<div name="01" class="hiddendiv">
  <input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
  <input name="name02" type="text" value="">
</div>

这是JSFiddle ,

Answer 1

试试这个代码

为单选按钮提供相同的名称，以便它可以作为一个组工作，并且

还将input tag的id设置为name02，以便将其用作jquery中的#name02

这样就可以了

$(function() {
  var radio = $("#closed");
  var hidden = $("#hide");
  hidden.hide();
  $(this).click(function() {
    if ($('#closed').is(':checked')) {
      hidden.show();
      $('#name02').prop('required', true);
    } else {
      hidden.hide();
      //clear when hidden checked
      $("#name02").val("");
      //remove required
      $('#name02').prop('required', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open

<div name="01" class="hiddendiv">
  <input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
  <input name="name02" id="name02" type="text" value="">
</div>