Javascript 如何将复选框更改为单选按钮？

所以，我想将我的复选框（已选中和未选中状态）更改为单选按钮，显示Yes（已选中）或No（未选中）

以下是我对复选框所做的操作：

我认为：

@Html.CheckBoxUi("PerpendicularCheckbox",@H.GetString("IsPerpendicular"), null, new { style = "margin-right:10px", @class = "type-style-paragraph" })

js:

我想知道在asp.net mvc中使用html扩展将它更改为单选按钮、是和否选项需要什么

编辑：

我对单选按钮的疯狂尝试：

 @Html.RadioButtonForUi("PerpendicularCheckbox",@H.GetString("IsPerpendicular"), null, new { style = "margin-right:10px", @class = "type-style-paragraph" })



 $('input:radio[name=PerpendicularCheckbox]').on({
                    "change": function () {
                        if (getUpdate()) {
                            var $this = $(this);
                            if (($this).is(':checked'))
                                $("ul li button").click();
                        }
                    }
                });

RadioButtonFrui：

 public static MvcHtmlString RadioButtonForUi<TModel, TProperty>(
          this HtmlHelper<TModel> htmlHelper,
          Expression<Func<TModel, TProperty>> expression,
          string name,
          bool IsEnable,
          bool IsChecked,
          object onchange = null,
          string className = "",
          bool isRequreid = true

        ) {etc.....}

public static MvcHtmlString RadioButtonForUi(
这个HtmlHelper HtmlHelper，
表情表情，
字符串名，
这是不合理的，
布尔被检查过，
对象onchange=null，
字符串className=“”，
bool isRequreid=true
){等等……}

这是一个测试样本：

      <div class="form-group">
        @Html.LabelFor(model => model.SaleOfPropertyPurchase, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.RadioButtonFor(model => model.SaleOfPropertyPurchase, true, new { id = "SaleOfPropertyPurchase-true" }) Yes
                @Html.RadioButtonFor(model => model.SaleOfPropertyPurchase, false, new { id = "SaleOfPropertyPurchase-false" }) No
                @Html.ValidationMessageFor(model => model.SaleOfPropertyPurchase, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

@LabelFor（model=>model.saleofpropertypourchase，htmlAttributes:new{@class=“controllabel col-md-2”}）
@RadioButton（model=>model.SaleOfPropertyPurchase，true，new{id=“SaleOfPropertyPurchase true”}）是
@RadioButton（model=>model.SaleOfPropertyPurchase，false，new{id=“SaleOfPropertyPurchase false”}）否
@Html.ValidationMessageFor（model=>model.SaleOfPropertyPurchase，“，new{@class=“text danger”}）

下面是一些示例jquery，它对单选按钮单击作出反应，并在表单上设置初始显示：

    @Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(function () {
        $('#CurrentPropertyOwner-true').on('change', function () {
            $('#CurrentProperty').show();
        });
    });
    $(function () {
        $('#CurrentPropertyOwner-false').on('change', function () {
            $('#CurrentProperty').hide();
        });
    });

    $(document).ready(function () {
        var ischecked = $('#CurrentPropertyOwner-true').is(':checked')
        if (ischecked == true) {
            $('#CurrentProperty').show();
        }
        var ischecked = $('#CurrentPropertyOwner-false').is(':checked')
        if (ischecked == true) {
            $('#CurrentProperty').hide();
        }
    });
</script>

@Scripts.Render（“~/bundles/jquery”）
$（函数（）{
$（'#CurrentPropertyOwner true'）。在（'change'，function（）{
$（'#CurrentProperty'）.show（）；
});
});
$（函数（）{
$（'CurrentPropertyOwner false'）。在（'change'，函数（）上{
$（'#CurrentProperty'）.hide（）；
});
});
$（文档）.ready（函数（）{
var ischecked=$（“#CurrentPropertyOwner true”）。是（“：checked”）
如果（ischecked==true）{
$（'#CurrentProperty'）.show（）；
}
var ischecked=$（“#CurrentPropertyOwner false”）。是（“：checked”）
如果（ischecked==true）{
$（'#CurrentProperty'）.hide（）；
}
});

您需要为属性呈现两个单选按钮，一个值为“True”，另一个值为“False”，这样选定的值可以绑定到一个

布尔值

您的自定义html帮助程序需要

namespace YourAssembly.Html
{
  public static class MyHelpers
  {
    public static MvcHtmlString BooleanButtonsFor<TModel>(this HtmlHelper<TModel> helper, Expression<Func<TModel, bool>> expression)
    {
      ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
      string name = ExpressionHelper.GetExpressionText(expression);
      StringBuilder html = new StringBuilder();
      // Yes button
      string id = string.Format("{0}-yes", name);
      html.Append(helper.RadioButtonFor(expression, "True", new { id = id }));
      html.Append(helper.Label(id, "Yes"));
      // No button
      id = string.Format("{0}-no", name);
      html.Append(helper.RadioButtonFor(expression, "False", new { id = id }));
      html.Append(helper.Label(id, "No"));
      // enclode in a div for easier styling with css
      TagBuilder div = new TagBuilder("div");
      div.AddCssClass("radiobuttongroup");
      div.InnerHtml = html.ToString();
      return MvcHtmlString.Create(div.ToString());
    }
  }
}

你是说像这样吗？是的，类似于这样，但我只想知道如何使用@html.radiobutton，并为上述复选框选择是和否。那么，如果需要单选按钮，为什么不使用@html.radiobutton？！我有错误，所以我不确定我是否做对了？像这样的错误：无法从用法推断方法“H.HtmlExtensions.RadioButtonForUi（System.Web.Mvc.htmlhelp，System.Linq.Expressions.Expression，string，bool，bool，object，string，bool）”的类型参数。尝试显式指定类型参数
namespace YourAssembly.Html
{
  public static class MyHelpers
  {
    public static MvcHtmlString BooleanButtonsFor<TModel>(this HtmlHelper<TModel> helper, Expression<Func<TModel, bool>> expression)
    {
      ModelMetadata metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
      string name = ExpressionHelper.GetExpressionText(expression);
      StringBuilder html = new StringBuilder();
      // Yes button
      string id = string.Format("{0}-yes", name);
      html.Append(helper.RadioButtonFor(expression, "True", new { id = id }));
      html.Append(helper.Label(id, "Yes"));
      // No button
      id = string.Format("{0}-no", name);
      html.Append(helper.RadioButtonFor(expression, "False", new { id = id }));
      html.Append(helper.Label(id, "No"));
      // enclode in a div for easier styling with css
      TagBuilder div = new TagBuilder("div");
      div.AddCssClass("radiobuttongroup");
      div.InnerHtml = html.ToString();
      return MvcHtmlString.Create(div.ToString());
    }
  }
}

<add namespace="YourAssembly.Html "/>

@Html.BooleanButtonsFor(m => m.YourBoolProperty)