前回のブログ投稿はチェック ボックスについてでしたが、今回はラジオ ボタンについてです。クエリ時に、選択したレコードの行が 1 つだけ選択できる場合、その行の 1 つのボタンも表示されます。選択ボタンも選択され、ユーザー エクスペリエンスが向上します。現代はユーザーエクスペリエンスの時代です。
効果は次のとおりです:
CSS ファイルは次のとおりです:
.selected{
background:#FF6500;
color:#fff;
今回はjs ファイルのコードは、以下に示すようにさらに単純になります。
/**
* ラジオボタンを含むテーブルの背景色を設定します
*/
$(document).ready(function()
{
/**
* 表をクリックしたときに背景色を変更します
*/
$("#tablight tr :gt(0)").click (function() //Get
{
$(this).addClass("selected").siblings().removeClass("selected").end(). find(" :radio").attr("checked",true);
})
});
コードを有効にするには、次のようにする必要があります。 id 属性をテーブルに追加します。属性値は「tablight」です。これが完了したら、使用するときにこれら 2 つのファイルを参照するだけです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
