显示在＆＃39;已检查＆＃39;

Question

这个例子有什么问题：

＆＃13;

＆＃13;

$('label#formSecondPhone:first-child').change(function() {
    var id = $('#formSecondPhoneField');
    $(this).attr('checked') ? $(id).show() : $(id).hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label id="formSecondPhone"><input type="checkbox" name="secondContact" value="1"> Phone</label> 
<label id="formSecondPhoneField" class="form-item">Enter your number: <input type="number" name="secondPhone"></label>

＆＃13;

＆＃13;

＆＃13;

formSecondPhoneField未显示/隐藏

Answer 1

1. 更改复选框选择器
2. 使用.is（“：checked”）检查复选框的检查状态

$(':checkbox[name=secondContact]').change(function() {
  var id = $('#formSecondPhoneField');
  
  console.log($(this).is(':checked'))
  $(this).is(':checked') ? $(id).show() : $(id).hide();
}).change();

#formSecondPhoneField {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="formSecondPhone"><input type="checkbox" name="secondContact" value="1"> Phone</label>
<label id="formSecondPhoneField" class="form-item">Enter your number: <input type="number" name="secondPhone"></label>