Question

我有以下代码将重置字段。

$('#email').find('input,textarea').val('');
$('#email').find('input[type=checkbox]').prop('checked', false);            
$('#email').find('select option:eq(0)').prop('selected', true);

我的问题是，我能否将上述代码与下面的代码类似。它有效吗？

$('#email').find('input,textarea,input[type=checkbox],select option:eq(0)').val('').prop('checked', false).prop('selected', true);

Answer 1

从技术上讲，你可以做到这一点因此，您将拥有一个包含checked和selected属性的文本区域。

是的，它会起作用。
是的，不应该有任何不良影响但是，听起来不太好。

此外，您的第二种方法绝对不会提高代码可读性。

function display(propName) {
  console.log("checkbox." + propName + " = " + $("#checkbox").prop(propName));
  console.log("text." + propName + " = " + $("#text").prop(propName));
  console.log("textarea." + propName + " = " + $("#textarea").prop(propName));
}

display("checked");

$("input, textarea").prop("checked", true);

display("checked");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="checkbox"/>
<input type="text" id="text"/>
<textarea id="textarea"></textarea>

Answer 2

根据我在这里的实验，我得出结论，你可以使用div中的下面代码重置表单元素： -

＆＃13;

function reset() {
  $(':input', '#email')
    .not(':button, :submit, :reset, :hidden')
    .each(function(i, e) {
      $(e).val($(e).attr('value') || '')
        .prop('checked', false)
        .prop('selected', false)
    })

  $('option[selected]', this).prop('selected', true)
  $('input[checked]', this).prop('checked', true)
  $('textarea', this).each(function(i, e) {
    $(e).val($(e).html())
  })

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="email">
  <input type="checkbox" id="checkbox" />
  <input type="text" id="text" />
  <textarea></textarea>
  <select>
    <option></option>
    <option value="TRUE">TRUE</option>
  </select>
  <buttion onclick="reset()">Reset</button>
</div>

＆＃13;

我可以在Jquery中为不同的字段使用多个prop（）吗？

2 个答案: