我需要幫助顯示和隱藏基於複選框的數據

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

變化做出

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

►$('#send_item_to_cutsew')到$('[name="send_item_to_cutsew"]')因爲不存在與該ID的元素。

工作演示

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