今回はjQueryのattrを使ってチェックボックスをラジオボタンに変更する方法を紹介します。
チェックボックスに限らずattrを使うことで属性の変更ができます。
attr()
attr()は、HTML要素の属性を取得したり設定することができるメソッドになります。
属性の取得
idを取得をするときの書き方は下記になります。
jQuery('div').attr('id');属性の変更
次は属性を変更したいときの書き方になります。
下はid名をaddに書き換えます。
jQuery('div').attr('id', 'add');属性の削除
属性を削除するときの書き方です。
jQuery('div').attr('id', '');チェックボックスをラジオボタンに変更
html
<ul class="box">
<li><input type="checkbox" value="アイテム1" name="checkbox" id="checkbox1"><label for="checkbox1">アイテム1</label></li>
<li><input type="checkbox" value="アイテム2" name="checkbox" id="checkbox2"><label for="checkbox2">アイテム2</label></li>
<li><input type="checkbox" value="アイテム3" name="checkbox" id="checkbox3"><label for="checkbox3">アイテム3</label></li>
<li><input type="checkbox" value="アイテム4" name="checkbox" id="checkbox4"><label for="checkbox4">アイテム4</label></li>
</ul>jQuery
jQuery('input[type=checkbox]').attr('type', 'radio');サンプル
変更前
変更後
まとめ
attr()メソッドを使うことで属性の取得や変更、削除などができます。
コメント