Hatena::ブログ(Diary)

ごっ主人ブログ このページをアンテナに追加 RSSフィード

2018年01月16日 cssでcheckboxカスタマイズのサンプル

cssでcheckboxカスタマイズのサンプル

<html>
<head>
<style>
label.check {
 box-sizing: border-box;
 position: relative;
 vertical-align: middle;
}
label.check>input[type='checkbox']{
display:none;
appearance: none;
}
label.check>span:before{
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;;
  top: 2px;
  left: 0;
  content: '';
  margin : 0 0.5rem 0 0;
  border:1px solid #ccc;
}

label.check>input[type='checkbox']:checked + span:after {
    display: inline-block;
    width: 6px;
    height: 12px;
    position: absolute;
    top: 0px;
    left: 5px;
    content: '';
    margin: 0 0.5rem 0 0;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: rotate(45deg);
}
</style>
</head>
<body>
<label class="check"><input type="checkbox" name="item1" value="1"><span>アイテム1</span></label>
<label class="check"><input type="checkbox" name="item2" value="2"><span>アイテム2</span></label>
</body>
</html>

2018年01月15日 ラジオボタンのon/off切り替え

ラジオボタンのon/off切り替え

<script>
$(function(){
    var radio = $('#radio input[type="radio"]:checked').val();
    $('#radio input[type="radio"]').on('click', function(){
        if ($(this).val() == radio) {
            $(this).prop('checked', false);
            radio = false;
        } else {
            radio = $(this).val();
        }
    });
});
</script>

<div id="radio">
<input type="radio" name="item" value="1">アイテム1
<input type="radio" name="item" value="2">アイテム2
</div>

※要jquery

2017年06月30日 nヶ月前から現在月までのリストを作成

nヶ月前から現在月までのリストを作成

var listYm = [];

var n = 3; // 3か月前
var dt = new Date();
    dt.setDate(1);
var from = dt.getMonth() + 1 - n;
var to   = dt.getMonth() + 1;

dt.setMonth(from);

for (var i=from; i<to; i++) {
  var ym = {};
  ym.year  = dt.getFullYear();
  ym.month = dt.getMonth() + 1;
  listYm.push(ym);
  dt.setMonth(dt.getMonth() + 1);
}

console.log(listYm);

2017年05月19日

2017年05月17日

javascriptメモ

javascriptでのページのリロード。

<script>
location.reload(true); // true:ページ更新, false:キャッシュからリロード
</script>

javascriptでの別ページにリダイレクト

<script>
document.location = 'http://d.hatena.ne.jp/gosshujin/';
</script>
Connection: close