チェックボックスに基づいてデータを表示したり隠したりするのに助けが必要

Question

私はフォームを持っています。フォームには、多くのチェックボックスがあります。人がチェックボックスをクリックした場合。ボックスの下のフィールドが表示されます。チェックボックスを再度クリックすると、チェックボックスの下にあるフィールドが消え、フィールドに値が設定されなくなります。

ここにコードがあります。私は、ショーを実行してJSを持っている。 Htmlと呼んでいます。

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

そのIDで要素がないので、変更は$('[name="send_item_to_cutsew"]')に$('#send_item_to_cutsew')►select.is(":checked")

にselect.attr('checked', true)►

を作りました。

ワーキングデモ

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

私は、これはjQueryのを使用していると仮定します。その場合、入力したセレクターはIDがsend_item_to_cutsewのものを探しています。

このページで参照されるようにjQueryは、ベースとしてCSSセレクタを使用しています。次のように名前に基づいて欲しいの入力を取得するhttps://api.jquery.com/category/selectors/

適切な方法は次のとおりです。

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

かidを上記のように設定することができます：

<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()">