我需要一些帮助，我不确定这是否可能。。。在我的应用程序中，我有一个区域有一个复选框列表。我需要每个复选框来调用它们自己的函数。我不得不尝试绑定属性，但我在使用它时运气不佳。我现在正在尝试使用onchange事件，但似乎无法传递任何内容。
<div class="dropdown-custom">
<input type="checkbox" id="dropdown" style="display: none">
<label class="dropdown-face" for="dropdown">
<div class="dropdown-text">Dropdown</div>
</label>
<ul class="dropdown-items">
<input type="checkbox" @onchange="eventArgs => { Zone1Checked(); }" id="zone1" style="visibility: visible">
<label class="inputi-plain" for="zone1" />
<div>
<br/>
</div>
<InputCheckBox id="zone2" style="visibility: visible" />
<label class="input-plain" for="zone2">
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone3" style="visibility: visible">
<label class="input-plain" for="zone3">
Zone 3
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone4" style="visibility: visible">
<label class="input-plain" for="zone4">
Zone 4
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone5" style="visibility: visible">
<label class="input-plain" for="zone5">
Zone 5
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone6" style="visibility: visible">
<label class="input-plain" for="zone6">
Zone 6
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone7" style="visibility: visible">
<label class="input-plain" for="zone7">
Zone 7
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone9" style="visibility: visible">
<label class="input-plain" for="zone9">
Zone 9
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone10" style="visibility: visible">
<label class="input-plain" for="zone10">
Zone 10
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone2" style="visibility: visible">
<label class="input-plain" for="zone11">
Zone 11
</label>
<div>
<br/>
</div>
<input type="checkbox" id="zone12" style="visibility: visible">
<label class="input-plain" for="zone12">
Zone 12
</label>
</ul>
</div>
<svg>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo"/>
<feBlend in="SourceGraphic" in2="goo"/>
</filter>
</svg>
@code {
public bool ZoneChecked1 { get; set; }
public void Zone1Checked()
{
Console.Write("I got ya working!");
ZoneChecked1 = true;
}
public void Zone2Checked()
{
}
public void Zone3Checked()
{
}
public void Zone4Checked()
{
}
public void Zone5Checked()
{
}
public void Zone6Checked()
{
}
public void Zone7Checked()
{
}
public void Zone8Checked()
{
}
public void Zone9Checked()
{
}
public void Zone10Checked()
{
}
public void Zone11Checked()
{
}
public void Zone12Checked()
{
}
private void Callback(ChangeEventArgs obj)
{
Console.Write("I got ya working!");
}
}
下面是一个简单的基于字典的复选框状态跟踪演示。
@page "/Checkbox"
<h3>Checkbox</h3>
@foreach (var cb in Checkboxes)
{
<div class="m-2 p-2">
<input type="checkbox" checked="@cb.Value" @onchange="(e) => Checked(e, cb.Key)" />Input Check 1 - @cb.Value
</div>
@if (cb.Value)
{
<div class="m-4 p-2 bg-secondary">
It is a good platform to learn programming.
It is an educational website. Prepare for the Recruitment drive
of product based companies like Microsoft, Amazon, Adobe etc with
a free online placement preparation course. The course focuses
on various MCQ's & Coding question likely to be asked in the
interviews & make your upcoming placement season efficient and
successful.
</div>
}
}
@code {
protected void Checked(ChangeEventArgs e, int no)
{
var x = e.Value;
Checkboxes[no] = (bool)e.Value;
}
protected Dictionary<int, bool> Checkboxes = new Dictionary<int, bool>
{
{ 1, false },
{ 2, false },
{ 3, true },
};
}
您只能在Blazor中的表单控件内使用InputCheckbox。
改变了我使用onclick的方式，我无法将输出输出到控制台。。。我也没有意识到我没有为控制台命令执行WriteLine。
<input type="checkbox" @onchange="@((ChangeEventArgs e) =>Zone1Checked(e))" value="@ZoneChecked1" id="zone1" style="visibility: visible">
<label id="zone1" for="zone1">
Zone 1
</label>
private void Zone1Checked(ChangeEventArgs checkedValue)
{
Console.WriteLine(checkedValue);
ZoneChecked1 = bool.Parse(checkedValue.Value.ToString());
if (ZoneChecked1)
{
string s = "Blah";
Console.WriteLine("work please");
}
else
{
Console.WriteLine("function is being called!");
}
}