Question

我有一些功能可以根据radio输入的选择更改HTML元素，而且工作正常。但是，对于元素的初始设置，而不是再次复制条件和代码，只需调用radio的{{1}}方法然后完成所有工作就会更短更清晰。这似乎无法正常工作（在Firefox或Chrome中）。尽管如此，它总是将文档中的最后一个trigger('change')视为已选中的radio。

示例在这里：http://jsfiddle.net/jydf5gby/

按钮的初始颜色应为红色，但会显示为蓝色。为什么会这样，解决方案是什么？

HTML：

<p><input type="radio" name="radio" value="red" checked="checked"/> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>

<button>button</button>

Javascript：

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    }).trigger('change');
});

Answer 1

您在所有单选按钮上触发事件，而不仅仅是所选单选按钮。尝试：

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    }).filter(":checked").trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type="radio" name="radio" value="red" checked="checked"/> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>

<button>button</button>

Answer 2

你可以这样使用它：

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $('input[name=radio]:checked').val());
    }).trigger('change');
});

Fiddle

当您触发应用于radio输入的事件时，您可以直接应用这些无线电的值，就像我在答案中所做的那样。这使您的代码更小，您可以节省一些字节。

Answer 3

在触发更改事件后，您有不正确的选择器来定位已检查的单选按钮值。你需要使用：

$('input[name=radio]').change(function () {
    if ( $('input[name=radio]:checked').val() == 'red') {
        $('button').css('background', 'red');
    } else {
        $('button').css('background', 'blue');
    }
}).trigger('change');

<强> Working Demo

更新 - Rory McCrossan的优化答案

$(document).ready(function () {
  $('input[name=radio]').change(function () {
      $('button').css('background',  $('input[name=radio]:checked').val());
  }).trigger('change');
});

<强> Demo for optimized code

Answer 4

您正在调用所有单选按钮的触发器。您只需filter()将其:checked加到See Fiddle here：

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    }).filter(':checked').trigger('change');
});

Fiddle here

您还可以优化实际处理程序，只需将background-color设置为当前val（）：

$(document).ready(function () {
    $('input[name=radio]').change(function () {
        $('button').css('background', $(this).val());
    }).filter(':checked').trigger('change');
});

Answer 5

试试这个

＆＃13;

$(document).ready(function () {

    
   
    $('input[name=radio]').bind("change",function(){
         if ($(this).val() == 'red') {
            $('button').css('background', 'red');
        } else {
            $('button').css('background', 'blue');
        }
    });
    $('input[name=radio]:first').click();
    
   
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type="radio" name="radio" value="red" /> red</p>
<p><input type="radio" name="radio" value="blue"/> blue</p>

<button>button</button>

＆＃13;

jQuery的触发器方法在文档就绪时无法正常工作

5 个答案:

Fiddle