在Jquery中切换detach（）选择器

Question

I have three radio buttons, I want to detach a div when input:radio[].val !== 'samplename' .

THESE ARE MY RADIO BUTTONS

<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>

THIS IS MY CURRENT JS SCRIPT

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

You need to use

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

to get the value of the checked checkbox.

if(!$('input:radio').is(':checked').val() == "Corporation") { will throw an error since the is method will return a boolean value which does not have the val method.

 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> 

---

You could just hide/show the element instead like

 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>