0

私はこのようなテンプレートを持っています。

サンプル テンプレート

<div id="form-entry">
    <h4>Some heading here</h4>
    <div class="form-field">
        <label>Some Label</label>
        <input type="text" class="some_text" />
    </div>
    <div class="form-field">
        <label>Some Label</label>
        <input type="text" class="some_text" />
    </div>
    <div class="form-field">
        <label>Some Label</label>
        <input type="text" class="some_text" />
    </div>
    <div class="form-field">
        <input type="checkbox" />
        <label>Some Label</label>
    </div>
    <div class="form-field">
        <label>Some Label</label>
        <textarea></textarea>
    </div>
</div>

ユーザーがチェックボックスをオンにした場合、入力form-fieldを含む div の上の divを削除 (または非表示) したい。HTML は自動的にレンダリングされ、特定のやcheckboxはありません。どうすればこれを行うことができますか。jQueryの位置は役に立ちますか?id'sclasses

JS

$('.form-field input[type=checkbox]').click( function(){
    entity = $(this);
    dad = entity.parent(); // This gets the form-field div element that contains the checkbox
});

form-field要素の上の div 要素をキャプチャするにはどうすればよいdadですか?

4

4 に答える 4

7 
$('.form-field input[type=checkbox]').on('change', function(){
    if (this.checked) 
        $(this).closest('.form-field').prev().remove();
});

チェックボックスがオンになっている場合、チェックボックスを含む.form_field上記を削除します ?.form_field

于 2012-12-21T12:03:38.623 に答える
1

あなたができる

$('#form-entry input[type="checkbox"]').change(function(){
    $(this).parent().prev().remove();
});

デモンストレーション

于 2012-12-21T12:03:37.827 に答える
1

次の jQuery を使用できます。

$('.form-field input[type=checkbox]').click(function() {
    $(this).parent().prev().toggle(); // parent is the checkboxs div, prev returns the previous element in the DOM
});​

Toggleチェックボックスがクリックされるたびに、前の div を非表示/表示します。

これがどのように機能するかを示すjsFiddleです

于 2012-12-21T12:07:16.240 に答える
0 
$('.form-field input[type=checkbox]').click( function(){
    entity = $(this);
    dad = entity.parent().prev().remove(); // This gets the form-field div element that contains the checkbox
});
于 2012-12-21T12:04:20.020 に答える