javascript - 在 Jquery 中切换 detach() 选择器

Question

我有三个单选按钮，我想在 input:radio[].val !== 'samplename' 时分离一个 div。

这些是我的单选按钮

<div class="form-group">
    <input checked="check" type="radio" value="Invididual" name="type_of_membership" id="radio-indi"> <label class="default-link" for="radio-indi">Individual</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" value="Institution" name="type_of_membership" id="radio-ins"> <label class="default-link" for="radio-ins">Institution</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="radio" value="Corporation" name="type_of_membership" id="radio-corp"> <label class="default-link" for="radio-corp">Corporation</label>
</div>

这是我当前的 JS 脚本

var comapany_input = $("#company-div");

$("input[type='radio']").click(function() {

    if (!$('input:radio').is(':checked').val() == "Corporation") {
        comapany_input.detach();


    } else {

        comapany_input.appendTo("body");
        comapany_input = null;
    }
});

Answer 1

您需要使用

if($('input:radio:checked').val() != "Corporation") {

获取选中复选框的值。

if(!$('input:radio').is(':checked').val() == "Corporation") { 将抛出错误，因为 is 方法将返回一个 boolean 值，该值没有 val 方法。

var comapany_input = $("#company-div");
$("input[type='radio']").change(function() {
  if (this.checked && this.value == 'Corporation') {
    comapany_input.appendTo('body');
  } else {
    comapany_input.detach();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input checked="check" type="radio" value="Invididual" name="type_of_membership" id="radio-indi">
  <label class="default-link" for="radio-indi">Individual</label>&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" value="Institution" name="type_of_membership" id="radio-ins">
  <label class="default-link" for="radio-ins">Institution</label>&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" value="Corporation" name="type_of_membership" id="radio-corp">
  <label class="default-link" for="radio-corp">Corporation</label>
</div>
<div id="company-div">company-div</div>

<小时/>

您可以隐藏/显示元素，例如

var comapany_input = $("#company-div");
$("input[type='radio']").change(function() {
  comapany_input.toggle(this.value == 'Corporation')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input checked="check" type="radio" value="Invididual" name="type_of_membership" id="radio-indi">
  <label class="default-link" for="radio-indi">Individual</label>&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" value="Institution" name="type_of_membership" id="radio-ins">
  <label class="default-link" for="radio-ins">Institution</label>&nbsp;&nbsp;&nbsp;&nbsp;
  <input type="radio" value="Corporation" name="type_of_membership" id="radio-corp">
  <label class="default-link" for="radio-corp">Corporation</label>
</div>
<div id="company-div">company-div</div>