Javascript 使用图像设置knockout.js单选按钮的样式

当用户选择单选按钮时，我使用knockout.js显示价格和id以下是脚本：

<div data-bind="with: bin2ViewModel">
    <div class="divRadiobtns" data-bind="foreach: availableGroups">
    <input type="radio" class="radioOptions" name="retailerGroup" data-bind="checked: $parent.selectedGroupOption, value: price" />
    </div>
    <div data-bind="with: selectedRetailerGroup">
    <span class="actualPrice" data-bind="text: price" />
    </div>
    <div data-bind="with: selectedRetailerGroup">
    <input type="hidden"  class="hiddenValue" data-bind="value: retailerproductId" />
    </div>
    </div>

但是我不能得到它wokring-有人知道我如何在knockout.js中设计风格吗

我以前使用jquery的方式如下：

<%--<script type="text/javascript">
      //<![CDATA[
        $(function () {
            $('input:radio').hide().each(function () {
                var label = $("label[for=" + '"' + this.id + '"' + "]").text();
                $('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').insertAfter(this);

            });

            $('.radio-fx').click(function () {
                $check = $(this).prev('input:radio');
                var unique = '.' + this.className.split(' ')[1] + ' span';
                $(unique).attr('class', 'radio');
                $(this).find('span').attr('class', 'radio-checked');
                $check.attr('checked', true);
                var rpPrice = $('input[name=selectRetailer]:radio:checked');
                // Here I have an ID
                $(".actualPrice").html(rpPrice.val());

                //                var rpId = $('input[name=selectRetailer]:radio:checked');
                //                $(".actualPrice").html(rpId.val());

            }).on('keydown', function (e) {
                if (e.which == 32) {
                    $(this).trigger('click');
                }

            });


        });      
    //]]>
    </script>--%>

-->

但是这就把knockout.js甩了

---

任何提示谢谢

您不能直接设置输入元素的背景样式，但这将为您提供一个起点：

您应该对样式使用

style

绑定，对类使用

css

绑定

例如：

<span class="radioOptions" data-bind="css: { 'radioOptions-checked': $parent.selectedGroupOption() == price() }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

您是否尝试过

css

绑定：我尝试过在绑定中添加样式，但它不起作用。您是否尝试过这种方法？是的，这很有效。您应该对样式使用

style

绑定，对类使用

css

绑定。您能给我举个例子吗？您不能直接为输入元素的背景设置样式，但这将为您提供一个起点：

<%--<script type="text/javascript">
      //<![CDATA[
        $(function () {
            $('input:radio').hide().each(function () {
                var label = $("label[for=" + '"' + this.id + '"' + "]").text();
                $('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').insertAfter(this);

            });

            $('.radio-fx').click(function () {
                $check = $(this).prev('input:radio');
                var unique = '.' + this.className.split(' ')[1] + ' span';
                $(unique).attr('class', 'radio');
                $(this).find('span').attr('class', 'radio-checked');
                $check.attr('checked', true);
                var rpPrice = $('input[name=selectRetailer]:radio:checked');
                // Here I have an ID
                $(".actualPrice").html(rpPrice.val());

                //                var rpId = $('input[name=selectRetailer]:radio:checked');
                //                $(".actualPrice").html(rpId.val());

            }).on('keydown', function (e) {
                if (e.which == 32) {
                    $(this).trigger('click');
                }

            });


        });      
    //]]>
    </script>--%>

<span class="radioOptions" data-bind="css: { 'radioOptions-checked': $parent.selectedGroupOption() == price() }">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>