Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryIndex</title>
<style>
div{
box-sizing: border-box;
}
.title{
width:100%;
border-bottom: #000 2px solid;
text-align: center;
}
.wrapper{
margin: 0 auto;
max-width: 610px;
}
.container{
float: left;
clear: left;
margin-bottom: 15px;
border:#fff 5px solid;
border-radius: 10px;
}
.allCheckBox{
display: block;
clear: left;
margin: 0 auto;
width: 100%;
text-align: center;
}
.allCheck{
margin-right: 5px;
font-size: 20px;
}
.cell{
float: left;
margin-bottom: 5px;
width: 200px;
height: 40px;
}
.imgs{
float: left;
width: 100px;
height: 100%;
cursor: pointer;
}
.ok, .no{
width: 100%;
height: 100%;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 40px;
}
.ok{
background-color: #5aa;
}
.no{
display: none;
background-color: #c55;
}
.check{
float: left;
width: 100px;
height: 100%;
line-height: 40px;
}
.allCheck, .soleCheck{
margin-left: 5px;
}
@media screen and (max-width:610px){
.wrapper{
margin: 0;
width: 100%;
}
.cell{
width:50%;
}
.imgs, .check{
width:50%;
}
.check{
padding-left: 10px;
}
}
</style>
</head>
<body>
<div class="wrapper">
<h1 class="title">Check your skill</h1>
<div id="container" class="container"></div>
<label class="allCheckBox"><input class="allCheck" type="checkbox" checked="true">ALL</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var langs = ['C', 'Java', 'PHP', 'Ruby', 'Python', 'JavaScript', 'HTML', 'CSS'];
var con = $('#container');
for(var i = 0; i < langs.length; i++) {
var div = '<div />';
var cell = $(div).addClass('cell'),
imgs = $(div).addClass('imgs'),
okImg = $(div).addClass('ok').text('(`・ω・´ )'),
noImg = $(div).addClass('no').text('(´・ω・`)'),
check = $(div).addClass('check'),
checkBox = $('<label />').text(langs[i]).prepend($('<input>').attr({
'class' :'soleCheck',
'type' :'checkbox',
'checked' :'true'
}));
imgs.append(okImg, noImg);
check.append(checkBox);
cell.append(imgs, check);
con.append(cell);
}
//img is pair of two photos
var switchImg = function(img){
img.children().toggle();
}
var switchRightImg = function(checked, index){
var okImg = $('.imgs').eq(index).find('.ok'),
noImg = $('.imgs').eq(index).find('.no');
if(checked) {
okImg.show();
noImg.hide();
} else {
okImg.hide();
noImg.show();
}
}
$('.imgs').click(function(){
switchImg($(this));
var prop = $(this).next().find('.soleCheck').prop('checked');
$(this).next().find('.soleCheck').prop('checked',!prop);
});
$('.soleCheck').change(function(){
var img = $(this).closest('.check').prev();
switchImg(img);
});
$('.allCheck').change(function(){
var isChecked = $(this).prop('checked');
$('.soleCheck').each(function(index){
$(this).prop('checked', isChecked);
switchRightImg(isChecked, index);
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment