Question

我有一些设置我想从jQuery mobile 1.4表单中取出来存储在localStorage中作为应用程序的用户设置。

这是表格。

<form style="margin:0;padding:0;width:">                    
        <b>Age</b><br>        
        <input type="range" data-mini="true" data-highlight="true" name="ageview" id="ageview" min="0" max="99" value="30" >
        <p>                                                      
        <b>Gender</b><br>        
        <input type="checkbox" data-role="flipswitch" name="genderview" id="genderview" checked="" data-on-text="f" data-off-text="m" data-wrapper-class="custom-label-flipswitch" data-mini="true">                   
        <p>
        <b>Units<br><br>
        <label>
            <input type="radio" name="unit_choice" id="unit_choice" value="metric_units" data-mini="true" checked="true">&nbsp;cm / kg
        </label>
        <label>
            <input type="radio" name="unit_choice" id="unit_choice" value="imp_units" data-mini="true">&nbsp;inches / ibs
        </label>
    </form>

如您所见，有问题的3个项目（年龄，性别和单位）保存在不同类型的输入中。我试图将它们变成这样的变量：

$("#settings_close").click(function(){
//get settings
var age_set = $("#ageview").val();
var gender_set = $("#genderview").val();
var units_set = $("#unit_choice").val();
alert("Age is "+age_set+". Gender is "+gender_set+". Units are "+unit_choice);
});

我正在使用控制台检查它们并获得此输出，无论性别复选框设置为什么。

Age is 30. Gender is on. Units are [object HTMLCollection]

我一直在尝试使用val（）和text（）方法，但除了Age之外我无法获得任何有意义的东西，它工作得很好。我必须承认，我真的不明白输入中的“名称”属性是什么。

Answer 1

首先，您的网页上永远不应该有两个具有相同id的元素。

这就是说，为了从您的单选按钮获取值，您可以尝试使用名称属性

例如

$('input[name=unit_choice]:checked').val()

对于你的复选框（flipswitch），你需要检查是否检查了值，一种方法是查看选中的选择器是否匹配任何内容。

例如

var gender = $('#genderview:checked').length > 0 ? 'f' : 'm';

或者，您可以直接查看checeked属性，如@ezanker提到的

var gender = $("#genderview").prop("checked") ? "female" : "male";

要更新vales，你会做类似的事情，除此之外你需要通过调用适当的刷新方法告诉JQM更新标记。

例如

  $("#genderview").prop("checked", gender == 'f').flipswitch('refresh');

更新提供的小提琴@ezanker

http://jsfiddle.net/N7jxY/2/

如何使用jQuery从表单中获取这些jQM 1.4值？

1 个答案: