0

我是发布/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 示例中的代码并使条件语句起作用？谢谢！

4

1 回答 1

0

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

var traits = 0;

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

这会将“特征”变量设置为整数，例如 1、11、101 或 1001。

顺便说一句：第二个参数parseInt()是基数。

但有几点建议：

  1. 不要使用“字符串”作为变量名。
  2. 使用性别和年龄的单选按钮。
  3. 将所有输入元素放入表单中。
  4. 有一个提交表单的按钮。
  5. 将处理程序附加到表单提交事件，并在该函数中进行处理，但调用e.preventDefault()以防止表单提交到服务器。或者，您可以让单个按钮不是提交按钮，并将单击处理程序附加到它。

这是一个带有上面代码和所有建议的jsfiddle 。

于 2013-04-11T03:58:45.537 回答