第一个问题

Question

我有一个测试页面，其中有许多问题，每个问题有4个选项。

<div class="question">
        <p>Who invented C?</p>
        <ul>
            <li><input type="radio" name="1" value='a'/>A. James Gowsling</li>
            <li><input type="radio" name="1" value='b'/>B. Dennis Ritchie</li>
            <li><input type="radio" name="1" value='c'/>C. Larry Wall</li>
            <li><input type="radio" name="1" value='d'/>D. Bob Peterson</li>
        </ul>
    </div>
    <div class="question">
        <p>Who invented Java?</p>
        <ul>
            <li><input type="radio" name="2" value='a'/>A. James Gowsling</li>
            <li><input type="radio" name="2" value='b'/>B. Dennis Ritchie</li>
            <li><input type="radio" name="2" value='c'/>C. Larry Wall</li>
            <li><input type="radio" name="2" value='d'/>D. Bob Peterson</li>
        </ul>
    </div>

我想找到用户选择的选项（a，b，c或d）并附加它们并作为字符串传递给submitTest.php。如果他没有尝试这个问题，我想要通过z。例如abbzd

我尝试了这个并且它有效，但我如何处理'未尝试'的问题并改为通过z。

$('document').ready(function () {
    $('#submit').click(function () {
        var string = '';
        $('.question').each(function () {
            $('input[type="radio"]').each(function () {
                if ($(this).is(':checked')) 
                    string += $(this).val();
            });
        });
        alert(string);
    });
});

其次，如果用户不想尝试任何问题而错误地点击任何选项，那么他就无法恢复。我的意思是他被迫选择组中的一个单选按钮。我怎么能纠正这个问题

Answer 1

第一个问题

您不需要迭代输入，只需检查是否选择了一个：

$('.question').each(function () {
    string += $(this).find('input:checked').length ? $(this).find('input:checked').val() : 'z';
});

第二个

使用复选框和此代码：

$('.question input').change(function(){
    $(this).closest('.question').find('input').not(this).prop('checked', false);
})

Answer 2

您已检查checked，因此只需应用else条件。

$('input[type="radio"]').each(function () {
    if ($(this).is(':checked')) {
        string += $(this).val();
    } else {
        string += 'z';
    }
});

已取消选择单选按钮：Javascript/ JQuery Deselecting radio buttons

Answer 3

你可以这样使用

var a1 = document.querySelector('input[name="1"]:checked');
var b1 = document.querySelector('input[name="2"]:checked');

if (a1 != null)
  a1 = a1.value;
else
  a1 = ‘’;
if (b1 != null)
  b1 = b1.value;
else
   b1 = ‘’;

alert(a1 + ‘ ’ + b1);

Answer 4

jQuery map-function非常适合这种事情。如果用户想要这样做，我还添加了清除按钮来清除答案：

HTML：

<div class="question">
    <p>Who invented C?</p>
    <ul>
        <li>
            <input type="radio" name="1" value='a' />A. James Gowsling</li>
        <li>
            <input type="radio" name="1" value='b' />B. Dennis Ritchie</li>
        <li>
            <input type="radio" name="1" value='c' />C. Larry Wall</li>
        <li>
            <input type="radio" name="1" value='d' />D. Bob Peterson</li>
        <li><button class="clear">Clear answer</button></li>
    </ul>
</div>

使用Javascript：

$('document').ready(function () {
    $('#submit').click(function () {
        var m = $("ul").map(function () {
            var $checked = $(this).find(":radio:checked");
            if ($checked.size() > 0) {
                return $checked.val();
            } else {
                return "z";
            }
        });
        console.log(m);
    });

    $("button.clear").on("click", function() {
        $(this).closest("ul").find(":radio").prop("checked", false);
    });
});

迭代单选按钮组并准备一串选定的选项

4 个答案:

第一个问题

第二个