查找是否选择了按钮

Question

我得到了带有按钮组和提交按钮的 HTML 代码。脚本代码检查它是否被选中并根据该选择提交。如果没有选择任何按钮，则显示警报。

$("#Save").on("click", Save);

function Save(e) {
    if (GeneralStatusAlert(e) == false) {
        return;
    } else {
        $('#frmSubmit').submit();
    }
}

function GetGeneralStatus() {
    var value = "";
    var row = $("#btnGeneral").closest(".row")   
    var object = $(this).find(".btn-group");
    value = $(object).find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

$('.testRow button').click(function () {    
    $(this).addClass("selected");    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row testRow">
    <div class="btn-group btnGeneral">
        <button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
        <button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
    </div>
</div>
     
<br/> 
<br/> 
<div class="row">
    <button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button> 
</div>

它不起作用。我错过了什么？

编辑：在按钮单击时添加了选择按钮类。

Answer 1

我已经更新了你的 JS：

$("#Save").on("click", Save);

$(".btnStatus").on("click", function(){
    $(".btnStatus").removeClass("selected");
    $(this).addClass("selected");
});

function Save(e) 
{
if (GeneralStatusAlert(e) == false) {
    return;
}
else{
     $('#frmSubmit').submit();
    }
}


function GetGeneralStatus() {
    var value = "";  
    value = $("div.btn-group").find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

基本上，您在单击状态按钮时并没有添加 selected 类。您的代码 var object = $(this).find(".btn-group"); 也没有找到任何东西。 （由于使用this）

Answer 2

您的示例代码中存在一些问题

1：bootstrap.js依赖JQuery，所以需要先添加。

2：缺少在状态按钮上添加所选类的代码

3：没有id为btnGeneral的元素，你使用了错误的选择器。 btnGeneral 是一个类，应该由 .

访问

4：你的意思可能是 $(row) 而不是 $(this)

    var row = $("#btnGeneral").closest(".row")   
    var object = $(this).find(".btn-group");

更新了示例代码。

$("#Save").on("click", Save);

$(".btn").on("click", function(){
     $(this).addClass("selected");
     $(this).siblings().removeClass("selected");
});

function Save(e) {
    if (GeneralStatusAlert(e) == false) {
        return;
    } else {
        alert("Submitting");
        $('#frmSubmit').submit();
    }
}

function GetGeneralStatus() {
    var value = "";
    var row = $(".btnGeneral").closest(".row")   
    var object = $(row).find(".btn-group");
    value = $(object).find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>



<div class="row">
    <div class="btn-group btnGeneral">
        <button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
        <button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
    </div>
</div>
     
<br/> 
<br/> 
<div class="row">
    <button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button> 
</div>