Question

我是发布/ stackoverflow的新手，所以请原谅我任何失礼。我有多个按钮和复选框，我需要将它们存储到条件语句中。

HTML代码：

<h1>SECTION 1: GENDER</h1>
    <p>What is your gender?</p>
    <input type="button" onclick="storeGender(this.value)" value="Male"/>
    <input type="button" onclick="storeGender(this.value)" value="Female"/>

    <hr />

    <h1>SECTION 2: AGE</h1>
    <p>What is your age?</p>
    <input type="button" onclick="storeAge(this.value)" value="18–22"/>
    <input type="button" onclick="storeAge(this.value)" value="23–30"/>

    <hr />

    <h1>SECTION 3: TRAITS</h1>
    <h3>Choose Two:</h3>
    <form>
        <input name="field" type="checkbox" value="1"/> Casual <br />
        <input name="field" type="checkbox" value="10"/> Cheerful <br />
        <input name="field" type="checkbox" value="100"/> Confident  <br />
        <input name="field" type="checkbox" value="1000"/> Tough  <br />
        <input type="button" id="storeTraits" value="SUBMIT" /> <br />
    </form>

    <hr />

    <h2>Here is what I suggest</h2>
    <p id="feedback">Feedback goes here.</p>

jQuery代码：

 // set up variables
var gender;
var age;
var string;

$(document).ready(function() {
    startGame();
    $("#storeTraits").click( function() {
        serializeCheckbox();
    }
    ); }
);

function startGame() {
    document.getElementById("feedback").innerHTML = "Answer all the questions.";
}

function storeGender(value) {
    gender = value;
}

function storeAge(value) {
    age = value;
}

function serializeCheckbox() {
    // clear out any previous selections
    string = [ ];
    var inputs = document.getElementsByTagName('input');

    for( var i = 0; i < inputs.length; i++ ) {
        if(inputs[i].type == "checkbox" && inputs[i].name == "field") {
            if(inputs[i].checked == true) {
                string.push(inputs[i].value);
            }
        }
    }
    checkFeedback();
}

//Limit number of checkbox selections
$(function(){
    var max = 2;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
    });
});

function checkFeedback() {
    if(gender == "Male") {
        if (age == "18–22" && string == 11){
            document.getElementById("feedback").innerHTML = "test1";
        } else if (age == "18–22" && string == 110){
            document.getElementById("feedback").innerHTML = "test2";
        } else if (age == "18–22" && string == 1100){
            document.getElementById("feedback").innerHTML = "test3";
        } else if (age == "18–22" && string == 101){
            document.getElementById("feedback").innerHTML = "test4";
        } 
    }
}

我在JSFiddle：http://jsfiddle.net/GNDAG/上找到了这个代码，这是我想要添加我的特征值的目的。但是，当我尝试合并它时，我的条件语句不起作用。如何从jsfiddle示例中添加代码并使条件语句起作用？谢谢！

Answer 1

您需要一个整数，而不是字符串数组。这是您需要的代码：

var traits = 0;

$('input[name=field]:checked').each(function () {
    traits += parseInt($(this).val(), 10);
});

这会将“traits”变量设置为1,11,101或1001之类的整数。

BTW：parseInt()的第二个参数是基础。

但是有一些建议：

请勿使用“string”作为变量名称。
使用单选按钮查看性别和年龄。
将所有输入元素放在表单中。
有一个提交表单的按钮。
将处理程序附加到表单提交事件，并在该函数中进行处理，但调用e.preventDefault()以阻止表单提交到服务器。或者，您可以让单个按钮不是提交按钮，并附加一个点击处理程序。

这是一个jsfiddle，其中包含上述代码并已实施所有建议。

多个复选框值的Jquery条件语句

1 个答案: