JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" name="newsletter" value="Hourly" checked="checked">  <input   type="checkbox" name="newsletter" value="Daily">
<input type="checkbox" name="newsletter" value="Weekly" checked>
<input type="checkbox" name="newsletter" value="Monthly">
<input type="checkbox" name="newsletter" value="Yearly">
<br><button id="selectall">Select All</button>

CSS

.btn_upload {
cursor:pointer;
display:inline-block;
overflow:hidden;
position:relative;
margin-top:10px;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-box-shadow:inset 0 1px 0 0 #abbeef;
-webkit-box-shadow:inset 0 1px 0 0 #abbeef;
box-shadow:inset 0 1px 0 0 #abbeef;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2a72d4',endColorstr='#1160b8');
background-color:#2a72d4;
border:1px solid #166b8a;
padding:5px 10px;
}

.btn_upload input {
cursor:pointer;
height:100%;
position:absolute;
filter:alpha(opacity=1);
-moz-opacity:0.01;
opacity:0.01;
}

.preview {
width:120px;
height:100px;
border:1px solid red;
margin-right:10px;
float:left;
}

JavaScript

var selectall = function() {
     $("input[type=checkbox]").prop("checked","true");    
};
$("#selectall").on("click", selectall );