使用单选按钮传递状态和值？答案

【问题标题】：working with radio buttons passing the status along with value?使用单选按钮传递状态和值？
【发布时间】：2017-02-21 21:20:38
【问题描述】：

我正在为单选按钮编写代码，其中有 3 个单选按钮，例如是、否和全部。我对所有 3 个使用相同的类名，并为它们绑定一个值。如果用户单击三个中的一个我能够在 onclick 事件上传递相应的值，但我的问题是如何知道用户是否单击了三个按钮中的哪个单选按钮，例如如果用户单击我想要执行的“全部”单选按钮如果用户点击“是”选项，则其他一些类型的操作，然后是一些不同的操作，等等。如何知道用户点击了哪个单选按钮？我的代码如下：

<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">All
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">Yes
<input type="radio" name="select_option" class="select_option" value="<?=$row_id;?>">No

我需要单选按钮值以及用户单击了哪个单选按钮。如何做到这一点？谁能指导我。

【问题讨论】：

您所有的单选按钮值都相同。为每个单选按钮传递不同的值。然后你可以在 php 中获取选中的单选按钮值
@B.Desai 是的，确实如此。但是，OP 似乎正在使用数据库。如果他们的行包含Yes, No, All 在他们的数据库未标准化的同一行（逗号分隔值），那么这可能是它并引入了更大的问题。可以使用这种方法，但不推荐。谁知道他们有什么以及真正的问题是什么/解决方案。
这个问题太不清楚了。您在数据库中的真正价值是什么？您会回答这些 cmets，还是只回答“答案”？如果没有，那么请继续使用给出的答案。由于不清楚而投票结束。
好的，我们的项目有动态来自数据库的模块列表，然后我们给用户一个选项，他是否点击“全部”（或）“是”（或）“否”选项来选择每个模块。我在单选按钮中传递每个模块的 id 作为值以在 javascript 中对其进行操作。
就像第一条评论所说的那样；您的单选按钮显然都具有相同的值。在不知道$row_id 是什么以及数据库模式/值是什么样的情况下，我们无法为您提供帮助。您需要坚持给出的答案；我会传递这个，祝你好运。

标签： javascript php html radio-button

【解决方案1】：

我在这些 html 元素中添加了我的类名（全部，是，否）

<input type="radio" name="select_option" class="select_option all" value="<?=$row_id;?>">All
<input type="radio" name="select_option" class="select_option yes" value="<?=$row_id;?>">Yes
<input type="radio" name="select_option" class="select_option no" value="<?=$row_id;?>">No

使用 jQuery

$(document).ready(function(){
  $("input:radio").click(function(e){

        if($(this).hasClass("all"))
        {
                console.log("which button -> all");
                console.log("value="+$(this).val());
        }
        else if($(this).hasClass("yes"))
        {
                console.log("which button -> yes");
                console.log("value="+$(this).val());
        }
        else if($(this).hasClass("no"))
        {
                console.log("which button -> no");
                console.log("value="+$(this).val());
        }
  });
});

FIDDLE

【讨论】：

谢谢，您的解决方案对我有用。但我也必须检查@Prateek Verma 的解决方案。
感谢您的努力 Pandiyan 非常感谢。我给你一个“赞成票”，但没有给出正确答案，因为我觉得 Prateek 的解决方案更适合我的要求。再次感谢您:)

【解决方案2】：

请在输入框中添加一个额外的参数来存储'id'，就像这样：

<input type="radio" name="select_option" class="select_option" value="all" data-id="<?=$row_id;?>">All
<input type="radio" name="select_option" class="select_option" value="yes" data-id="<?=$row_id;?>">Yes
<input type="radio" name="select_option" class="select_option" value="no" data-id="<?=$row_id;?>">No

现在，这是检查单选按钮后将运行的脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('.select_option').click(function() {
        if ($(this).prop('checked')) {
            var id = $(this).data('id');
            var value = $(this).val();
        }
       alert(value);
    });
});
</script>

希望对你有用。

【讨论】：

感谢 Prateek，您的解决方案也对我有用。我很困惑我应该投票给谁，因为 Pandiyan 解决方案也对我有用..
我很高兴，它帮助了你。做一件事，把更适合你的方案标记为正确，投票给其他正确的答案，让有需要的人找到最合适的答案，谢谢。
感谢 Prateek，我为你投票。你能告诉我HTML元素的“data-”属性有什么用吗？我知道使用因为我在编辑数据以获取信息并在弹出模式中显示它们时将该属性用于模态，但我不知道我们也可以像您在解决方案中所说的那样使用它。
'data-*' 主要用于存储自定义数据，因为有时你需要在任何 html 标签中包含比 id 或 class 更多的数据，所以它可以在大多数情况下全局使用html标签。欲了解更多信息，请访问：w3schools.com/tags/att_global_data.asp。希望对你有所帮助。

【解决方案3】：

试试这个

$(".select_option").change(function(){
        var radioValue = $("input[name='select_option']:checked").val();
        if(radioValue){
            alert("Your are clicked - " + radioValue);
        }
    });

【讨论】：

【解决方案4】：

$(".select_option").change(function () {
    if ($(this).is(":checked")) {
        var value = $(this).val();
        console.log(value);
    }
});

fiddle

【讨论】：

我可以得到值，但我的问题是如何知道用户是否点击了“全部”、“是”、“否”三个单选按钮
您可以使用值变量进行进一步处理
我已经知道那个解决方案了。我已经在 php 标签中动态传递了一个值，您可以查看我上面的问题。以及我需要单击哪个单选按钮的值。