javascript - Jquery 移动翻转切换从两个按钮中选择至少一个。

Question

我的 html 中有两个翻转切换按钮，如果用户将性别值设置为男性“关闭”，然后用户为女性选择性别值“关闭”，则男性按钮将自动切换为“打开”，反之反之亦然。换句话说:如果取消选择一个翻转开关并取消选择两个开关，我想选择相反的按钮。

html:

<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >    
        <label for="flip-1">Men</label>
        <select name="flip-1" id="flip-1" data-role="slider"data-mini="true"onclick="toggleRule()>
            <option value="off"></option>
            <option selected="selected" value="on"></option>
        </select> 
    </div>

    <div data-role="fieldcontain" id="womenSelector" >  
        <label for="flip-2">Women</label>
        <select name="flip-2" id="flip-2" data-role="slider"data-mini="true"onclick="toggleRule()>
            <option value="off"></option>
            <option selected="selected" value="on"></option>                
        </select>           
    </div>

我的无效尝试:

 function toggleRule() {
// If the value is off, and female is off, then select automatically female on
if ($("flip-1").val()=="off" && $("flip-2").val()=="off"){ //condition one
    $("flip-2").val()=="on";
}
else if ($("flip-2").val()=="off" && $("flip-1").val()=="off"){ //contition 2
    $("flip-1").val()=="on";
}
};

Answer 1

将 change 事件附加到 slider flip-1 和 flip-2。每当其中一个发生变化时，读取其值并相应地更新其他 slider 。最重要的部分是当您以编程方式更新 slider 的值时刷新 slider .slider("refresh")。

$(document).on("pagecreate", "#pageID", function () {
    $("#flip-1, #flip-2").on("change", function () {
        if ($(this).val() == "on") {
            $("select")
                .not($(this))       /* select other slider */
                .val("off")         /* update its' value */
                .slider("refresh"); /* refresh it */
        }
        if ($(this).val() == "off") {
            $("select")
                .not($(this))
                .val("on")
                .slider("refresh");
        }
    });
});

Demo