Ich brauche Hilfe zum Anzeigen und Ausblenden von Daten auf der Grundlage einer Checkbox

Question

Okay, so habe ich ein Formular. In der Form habe ich viele Kontrollkästchen. Wenn eine Person auf das Kontrollkästchen klickt. Es zeigt das Feld unterhalb der Box. Wenn sie erneut auf das Kontrollkästchen klicken, verschwindet das Feld unterhalb der Checkbox und das Feld hat keinen Wert mehr.

Hier ist der Code. Ich lasse JS die Show laufen und verstecken. und Html ruft es an.

function ShowCutSewDescription() { 
    var select = $('#send_item_to_cutsew'); 
    console.log(select) 
    //select = parseInt(select); 
    if (select.attr('checked', true)) { 
     $('#cutsew-checked').show(); 
    }else { 
     $('#cutsew-checked').hide(); 
    } 
} 

<div class="form-group"> 
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label> 
<div class="col-md-9"> 
    <input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()"> 
</div> 

Answer 1

vorgenommene Änderungen

► select.attr('checked', true)zuselect.is(":checked")

► $('#send_item_to_cutsew')zu$('[name="send_item_to_cutsew"]') da kein Element mit dieser ID ist.

Working Demo

function ShowCutSewDescription() { 
 
    var select = $('[name="send_item_to_cutsew"]'); 
 
    if (select.is(":checked")) { 
 
    $('#cutsew-checked').show(); 
 
    } else { 
 
    $('#cutsew-checked').hide(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label> 
 
    <div class="col-md-9"> 
 
    <input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()"> 
 
    </div> 
 
    <div id="cutsew-checked"> 
 
    Sample box 
 
    </div>

Answer 2

Ich nehme an, das jQuery verwendet. Wenn dies der Fall ist, sucht der von Ihnen eingegebene Selektor nach etwas mit der ID send_item_to_cutsew.

jQuery verwendet CSS-Selektoren als Basis, wie sie durch diese Seite verwiesen: https://api.jquery.com/category/selectors/

Der richtige Weg, um die Eingabe, die Sie basierend auf dem Namen wollen ist wie folgt:

var select = $('[name="send_item_to_cutsew]'); 

oder Sie kann die ID auf die obige wie folgt setzen:

<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">