-3

私はJavaScript全般、特にjQueryに不慣れで、助けが必要です。

ラジオボタンが選択されていることを検証するスクリプトを作成する必要があります。ラジオボタンが選択されていない場合は、それらが表示されているテーブルセルを赤で強調表示して、ユーザーに警告します。

<table>
  <tr><td><input type="radio"/></td><td>value 1</td></tr>
  <tr><td><input type="radio"/></td><td>value 2</td></tr>
  <tr><td><input type="radio"/></td><td>value 3</td></tr>
</table>
<input type="submit"/>

編集

ラジオボタンを含むセルのみを強調表示したい

4

5 に答える 5

1 
var checked = false;

$('input:radio').each(function(){
    if($(this).prop('checked')){
        checked = true;
    }
});

if(!checked){
    $('table').css('background','red');
}
于 2012-12-28T13:42:23.543 に答える
1 
$(document).on("click", "input[type='submit']", function(){
    if($("input[type='radio']:checked").size() === 0){
      $("table").css("background-color", "red");
    }else{
      $("table").css("background-color", "white");  
    }
});​

例

編集：

テーブル全体ではなく、入力を含むテーブル行のみの場合は、次を使用します。

$(document).on("click", "input[type='submit']", function(){
    if($("input[type='radio']:checked").size() === 0){
        $("table tr").has("input").css("background-color", "red");
    }else{
        $("table tr").has("input").css("background-color", "white");  
    }
});​

更新された例

于 2012-12-28T13:44:59.417 に答える
1

1）最初にラジオボタンが選択されているかどうかを確認します。

var any_checked = false;

$("input:radio").each(function() {
    if ($(this).attr("checked") == 0) {
        any_checked = true;
    }
});​

2）テーブルにIDを指定します。たとえばid="mytable" 、の値を確認します。falseのany_checked場合はラジオボタンが選択されていないため、セルを赤にしてエラーをスローします。

$('#mytable').css('backgroundColor', 'red');
于 2012-12-28T13:46:20.437 に答える
1

.css（）関数を使用するだけです

$('input[type=submit]').click(function(){ // <-- this assuming these aren't inside a form
// if it is then do this inside the submit function
// $('yourform').submit(function(){
    $('td').css('background-color',function(){
        return $('input[type=radio]:checked',this).length === 0 ? 'red' : '';
    });
});

フィドル

：hasまたは.has（）セレクターを使用して、入力を含むtdをフィルターで除外できます。

$('input[type=submit]').click(function() {
// or $('td').has(input[type=radio])
    $('td:has(input[type=radio])').css('background-color', function() {
        return $('input[type=radio]:checked', this).length === 0 ? 'red' : '';
    });
});​

フィドル

于 2012-12-28T14:35:54.857 に答える
0

私はそれをこのように解決しました：

var IsValid = $("input[name=foo]:checked").length > 0;
$('input[name=foo]').parent().toggleClass('error', !IsValid);
于 2012-12-30T17:14:18.217 に答える