javascript - 通过代码中的值检查radiobutton组中的radiobutton

时间:2017-07-04 21:08:55

标签: javascript html

我正在研究一个项目,我需要通过它的值来检查来自radiobutton组的radiobutton。

我有这个radiobutton小组。

var x="Nonoriente"       or     var x="oriente"    

在我的代码中我有一个变量,我设法将它影响到两个值中的一个

#include <stdio.h>
#include <gtk/gtk.h>

static void activate(GtkApplication *app, gpointer user_data) {
    GtkWidget *window;

    window = gtk_application_window_new(app);

    gtk_window_set_title(GTK_WINDOW (window), "Tutorial");
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200);
    gtk_widget_show_all(window);

}

int main(int argc, char **argv) {
    printf("Hello, World!\n");

    //printf("Ein akustisches Signal mit : (\\a)\a");
    printf("\nEin Backspace mit : (\\b) | \bx\n");
    printf("Ein Zeilenvorschub mit : (\\t) |\tx");
    printf("\n\tC\n\ti\n\ts\n\tt\n\ttoll\n");
    printf("\t   u\n\t   n\n\t   d\n");
    printf("\t   macht Spaß\n");

    //Kommentar 1
    /* Kommentar 2 */
    /*
     * Mehrzeiliges Kommentar
     */

    GtkApplication *app;
    int status;

    app = gtk_application_new("org.gtk.example", G_APPLICATION_FLAGS_NONE);

    g_signal_connect(app, "activate", G_CALLBACK(activate), NULL);

    status = g_application_run(G_APPLICATION(app), argc, argv);

    g_object_unref(app);

    return status;
}

我的目标是在触发事件时自动检查无线电按钮中x的等效值。

2 个答案:

答案 0 :(得分:0)

使用jQuery很容易。以下是.prop() method的文档。

if (x === Oriente) {
    $( input:first-of-type ).prop( "checked" );
} else {
    $( input:first-of-type ).prop( "checked" );
}

可以更容易地为每个单选按钮分配唯一ID,并使用它们访问DOM元素上的.prop()方法。 (从语义上讲,它们应该是唯一的。如果由于某种原因你想要对多个DOM节点应用任何东西,你应该使用一个类。)

原生Javascript:

if (x === Oriente) { 
    document.getElementById('uniqueId1').checked = true; 
} else { 
   document.getElementById('uniqueId2').checked = true; 
}

答案 1 :(得分:0)

首先,将大象固定在房间内:您的标记中不能包含重复的ID。我们编写的并不是一些任意规则,但处理重复ID时的浏览器行为未定义。没有任何项目永远要求您拥有重复的ID - 这只是意味着糟糕的设计。

如果要按值选择,唯一的方法是选择页面上与此选择器匹配的所有单选按钮:input[type="radio"][value="Nonoriente"]。然后迭代遍历此节点集合并将其checked属性设置为true。

p / s:这种方法效率很低,但考虑到你在项目中提到过限制,它可能是唯一可行的解​​决方案。

&#13;
&#13;
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  var radioInputs = document.querySelectorAll('input[type="radio"][value="Nonoriente"]');

  for (i = 0; i < radioInputs.length; ++i) {
    radioInputs[i].checked = true;
  }
});
&#13;
<label class="radio-inline">
    <input type="radio" name="slect" id="optradio"  value="oriente" checked>Orienté
</label>
<label class="radio-inline">
    <input type="radio" name="slect" id="optradio" value="Nonoriente">Non orienté
</label>

<button type="button" id="btn">Click to check nonoriente</button>
&#13;
&#13;
&#13;