Question

我的页面下面有很多单选按钮。这对我的用户来说是必须的检查每一行。我正在寻找一种方法，点击我的保存按钮我对所有单选按钮进行检查，并确保使用有限的javascript或jquery代码检查它们。

我怎样才能实现这个目标？

            <div id="HealthCheck1">           
                <div id="HCBudget">
                    <label for="budgethealth">Budget Health</label>
                    <span class="radiored"><input type="radio" id="bhred" name="budgethealth" value="red" @(Model.BudgetHealth == "3" ? "checked='checked'" : "")></input></span>
                    <span class="radioyellow"><input type="radio" id="bhyellow" name="budgethealth" value="yellow" @(Model.BudgetHealth == "2" ? "checked='checked'" : "")></input></span>
                    <span class="radiogreen"><input type="radio" id="bhgreen" name="budgethealth" value="green" @(Model.BudgetHealth == "1" ? "checked='checked'" : "")></input></span>
                </div>
                <hr>
                <div id="HCTeam">
                    <label for="teamhealth">Team Health</label>
                    <span class="radiored"><input type="radio" id="thred" name="teamhealth" value="red" @(Model.TeamHealth == "3" ? "checked='checked'" : "")></input></span>
                    <span class="radioyellow"><input type="radio" id="thyellow" name="teamhealth" value="yellow" @(Model.TeamHealth == "2" ? "checked='checked'" : "")></input></span>
                    <span class="radiogreen"><input type="radio" id="thgreen" name="teamhealth" value="green" @(Model.TeamHealth == "1" ? "checked='checked'" : "")></input></span>
                </div>
                <hr>
                <div id="HCRisk">
                    <label for="riskhealth">Risk Health</label>
                    <span class="radiored"><input type="radio" id="rhred" name="riskhealth" value="red" @(Model.RiskHealth == "3" ? "checked='checked'" : "")></input></span>
                    <span class="radioyellow"><input type="radio" id="rhyellow" name="riskhealth" value="yellow" @(Model.RiskHealth == "2" ? "checked='checked'" : "")></input></span>
                    <span class="radiogreen"><input type="radio" id="rhgreen" name="riskhealth" value="green" @(Model.RiskHealth == "1" ? "checked='checked'" : "")></input></span>
                </div>
            </div>      
            <div id="ProgHealthStat" class="btnholder">
                <button id="Save" class="sendbtn">Save Changes</button>
            </div>

我尝试了这行代码，但没有运气。尽管单选按钮都已经过检查，但我仍然收到警报。

            $('div.HealthCheck1:not(:has(:radio:checked))')

Answer 1

为每个具有单选按钮的div提供一个类属性（例如class="foo"）。然后你可以这样做：

＆＃13;

$(document).ready(function() {
  $('#Save').on('click', function() {
    if ($('.foo:not(:has(:radio:checked))').length) {
      alert('Please finish filling out the form');
    }
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="HealthCheck1">
    <div id="HCBudget" class="foo">
        <label for="budgethealth">
            Budget Health
        </label>
        <span class="radiored">
            <input id="bhred" name="budgethealth" type="radio" value="red"/>
        </span>
        <span class="radioyellow">
            <input id="bhyellow" name="budgethealth" type="radio" value="yellow"/>
        </span>
        <span class="radiogreen">
            <input id="bhgreen" name="budgethealth" type="radio" value="green"/>
        </span>
    </div>
    <hr>
    <div id="HCTeam" class="foo">
        <label for="teamhealth">
            Team Health
        </label>
        <span class="radiored">
            <input id="thred" name="teamhealth" type="radio" value="red"/>
        </span>
        <span class="radioyellow">
            <input id="thyellow" name="teamhealth" type="radio" value="yellow"/>
        </span>
        <span class="radiogreen">
            <input id="thgreen" name="teamhealth" type="radio" value="green"/>
        </span>
    </div>
    <hr>
    <div id="HCRisk" class="foo">
        <label for="riskhealth">
            Risk Health
        </label>
        <span class="radiored">
            <input id="rhred" name="riskhealth" type="radio" value="red"/>
        </span>
        <span class="radioyellow">
            <input id="rhyellow" name="riskhealth" type="radio" value="yellow"/>
        </span>
        <span class="radiogreen">
            <input id="rhgreen" name="riskhealth" type="radio" value="green"/>
        </span>
    </div>
    </hr>
    </hr>
</div>
<div class="btnholder" id="ProgHealthStat">
    <button class="sendbtn" id="Save">
        Save Changes
    </button>
</div>

＆＃13;

确保在页面上检查所有单选按钮。

1 个答案: