javascript - 如何获取父div data-id

Question

我有

<div class="answers-form"  data-id="1">
    <div class="form-group">
       <label>
           <input value="" type="checkbox" name="answer[]">
       </label>
    </div>
    <span></span>           
</div>

我需要检查，如果检查输入，则获取div的data-id。

Answer 1

您需要将 change 事件监听器附加到复选框，然后使用 closest() 获取父级，最后使用 data() 就像:

$('[name="answer[]"]').on('change', function() {
    if ( $(this).is(':checked') ) {
        console.log( $(this).closest('.answers-form').data('id') );
    }
});

如果您必须检查提交时是否选中复选框，您可以在提交事件中执行此操作，例如:

$('form').on('submit', function(e) {
    e.preventDefault();

    if ( $('[name="answer[]"]').is(':checked') ) {
        console.log( 'submit' );
    } else {
        console.log( 'Prevent submit' );
        return false;
    }
});

希望这有帮助。

$('[name="answer[]"]').on('change', function() {
    if ($(this).is(':checked')) {
        console.log($(this).closest('.answers-form').data('id'));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="answers-form" data-id="1">
  <div class="form-group">
    <label>
       <input value="" type="checkbox" name="answer[]" />
    </label>
  </div>
  <span></span>

</div>