LoginSignup
1
1

More than 5 years have passed since last update.

checkboxをチェックしたらラベルを太字にする

Last updated at Posted at 2015-10-16

コピぺ自分用


 $('input[type=checkbox]').filter(":checked").each(function() {
        $(this).closest('label').css('font-weight', 'bold');
    })
    .end().on('change', function() {
        $(this).prop('checked') ? $(this).closest('label').css('font-weight', 'bold') : $(this).closest('label').css('font-weight', 'normal');
    });


※追記

HTMLは下記のようなlabelでinputを囲っているとき用です

<label><input type="checkbox" name="checkbox" value="value">Text</label>

下記のHTMLでは動作しません(この場合はコメント欄のtypistaさんが記述しているCSSを使うのが良いと思います)

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
1
1
1

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
1
1