form表單中的複選框checkbox使用required屬性的方法

checkbox類型使用required屬性時,如果給每個選項都添加,則需要選擇全部選項後才能提交。

本文的方法可以實現只選擇一個選項後即可提交。

實現代碼:

 

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

     <form action="http://www.baidu.com">
          

   <label>
      <input type="checkbox" name="test[]" value="1" required="required">test-1
    </label>
    <label>
      <input type="checkbox" name="test[]" value="2" required="required">test-2
    </label>
    <label>
      <input type="checkbox" name="test[]" value="3" required="required">test-3
    </label>
    

    <input type="submit">
</form>

 

   
<script>
 var requiredCheckboxes = $(':checkbox[required]');
  requiredCheckboxes.on('change', function(e) {
    var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
    var isChecked = checkboxGroup.is(':checked');
    checkboxGroup.prop('required', !isChecked);
  });

  </script>

</body>
</html>

 

**注:label標籤的使用使得選擇框和文字成爲一個整體,點擊文字即可完成選擇。可以利用此標籤設置點擊整行進行選擇。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章