Question

使用jQuery我想检查是否选中了div标签内的复选框或单选按钮，并获取所选复选框和单选按钮的值。

例如：

     <div>
        Question
        <div>
            What is your name?
        </div>
        <div>
            <input type="radio" name="r1" checked/>abc<br/>
            <input type="radio" name="r1"/>pqr<br/>
            <input type="radio" name="r1"/>lmn<br/>
        </div>
    </div>

    <div style="visibility: hidden">
        Question
        <div>
            What is your company name?
        </div>
        <div>
            <input type="checkbox" name="c1" checked/>comp1<br/>
            <input type="checkbox" name="c1"/>Comp2<br/>
            <input type="checkbox" name="c1"/>Comp3<br/>
        </div>
    </div>

按钮点击我想显示问题，并在那个问题的答案前面。如下所示

你叫什么名字= abc

您的公司名称是什么= comp1，comp2

感谢。

Answer 1

在这里你可以找一些代码示例

 var chk = $('#dvTest input:radio:checked');
 chk.attr('value');

它将为您提供检查哪个无线电按钮。无论您想要什么价值，请将其保存在该值的属性中：

 <input type="radio" name="r1" checked="checked" value="abc"/>

你可以为复选框做同样的事。

Answer 2

请参阅http://api.jquery.com/checked-selector/，了解如何使用：选中的选择器。

Answer 3

也许是这样的：

http://jsfiddle.net/magicaj/xFqHN/

HTML：

<div>
    Question
    <div>
        What is your name? <span id="your-name"></span>
    </div>
    <div>
        <input type="radio" name="r1" value="abc" checked="checked" />abc<br/>
        <input type="radio" name="r1" value="pqr" />pqr<br/>
        <input type="radio" name="r1" value="lmn" />lmn<br/>
    </div>
</div>

<div id="comp" style="visibility: hidden">
    Question
    <div>
        What is your company name?<span id="comp-name"></span>
    </div>
    <div>
        <input type="checkbox" name="c1" value="comp1" checked/>comp1<br/>
        <input type="checkbox" name="c1" value="Comp2" />Comp2<br/>
        <input type="checkbox" name="c1" value="Comp3" />Comp3<br/>
    </div>
</div>

JS：

$("input[name='r1']").click(function() {
    $("#your-name").html($(this).val());
    updateCompName();
    $("#comp").css("visibility", "visible");    
});

var updateCompName = function() {
    var element = $("#comp-name");
    var compNames = "";
    compCheckboxes.each(function() {
        if (this.checked === true) {
            compNames += " " + $(this).val();
        }
    });
    $("#comp-name").html(compNames);
}

var compCheckboxes = $("input[name='c1']");

compCheckboxes.click(updateCompName);

您错过了无线电和复选框上的value属性。我添加了跨占位符来使用收音机/复选框的当前值更新文本。

检查div中是否选中了复选框或单选按钮

3 个答案: