LoginSignup
2
1

More than 5 years have passed since last update.

jQuery チェックしたチェックボックスの背景の色を変更する

Last updated at Posted at 2015-12-25
checkbox.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title>jQuery 1.6 チェックしたチェックボックスの背景の色を変更する</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6");</script>
<script language="JavaScript" type="text/javascript">
<!--
$(window).load(function(){
    var bgcolor = 'red';
    $(":checked").closest('td').css('background', bgcolor);
    $("input[type='checkbox']").change(function(){
        if($(this).is(":checked")){
          $(this).closest('td').css('background', bgcolor);
        }else{
          $(this).closest('td').css('background', '');
        }
    });
});
//-->
</script>
</head>
<body>
<table border=1>
    <tr>
        <td>
            <input type="checkbox" name="checkbox1">a
        </td>
        <td>
            <input type="checkbox" name="checkbox2" checked>b
        </td>
    </tr>
       <tr>
        <td>
            <input type="checkbox" name="checkbox3">c
        </td>
        <td>
            <input type="checkbox" name="checkbox4">d
        </td>
    </tr>
</table>
</body>
</html>

注意すべきこと

jQueryのバージョンによっては、動かなくなる場合あり

参考にしたページ

http://www.finefinefine.jp/jquery/kiji1420
http://kachibito.net/snippets/change-check-box-bg-color
http://www.detelu.com/blog/sample/jQuery/checkbox/index.html
http://jsfiddle.net/uJcB7/
http://tech.ironhearts.com/blog/archives/148
http://nob-log.info/2012/08/17/jquery-closest/

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1