link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

开朗的洋葱 · 超赞！ ...· 1 月前 ·

心软的芒果 · 温暖的BaoBao 一起向未来· 1 年前 ·

满身肌肉的滑板 · 【158】Linux ...· 1 年前 ·

冷静的鞭炮 · pcgs银元评级标准详解_银元百科网· 2 年前 ·

爱旅游的红烧肉 · 爱驰汽车三年销量未过万 ...· 2 年前 ·

More than 5 years have passed since last update.

@ s0hno

checkboxで選択した際に、背景色を変更する。

Posted at 2013-12-23

完成イメージは、【A-STAR フリーランス】フリーエンジニアの案件と仕事の検索条件指定欄のcheckboxです。

jsのonclickイベントで背景色を変えるように実装します。

<form method="" action="">
    <label><input class="check" type="checkbox" id="hoge" onclick="chebg('hoge')" value="hoge">hoge</label>
    <label><input class="check" type="checkbox" id="hoge2" onclick="chebg('hoge2')" value="hoge2">hoge2</label>
    <label><input class="check" type="checkbox" id="hoge3" onclick="chebg('hoge3')" value="hoge3">hoge3</label>
    <div class="menu-submit">
        <input type="submit" value="送信" />
</form>
javascript
if文でcheckboxにチェックがついているかどうかで分岐させます。
function chebg(chkID){//タグの背景色変更
    Myid=document.getElementById(chkID);
    if(Myid.checked == true){
        Myid.parentNode.style.backgroundColor = '#CC28A8';
        Myid.parentNode.style.color = '#FFFFFF';
    }else{
        Myid.parentNode.style.backgroundColor = '#FFFFFF';//背景色
        Myid.parentNode.style.color = '#333333';//文字色
今のままだと、チェックボックスが見えていますので、cssで隠します。
.check{
    display:none;