Question

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

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事件附加到两个幻灯片flip-1和flip-2。每当其中一个被更改时，请阅读其中的一个。值并相应地更新其他滑块。当您以编程方式.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

Answer 2

我从你的问题中假设两者都可以开启，但两者都不能关闭。

在这种情况下，请在每个flipswitch上处理change事件。如果值为off，则将另一个设置为on并刷新flipswitch小部件。

$(document).on("pagecreate", "#page1", function(){
    $("#flip-1").on("change", function(){
        if ($(this).val() == "off"){
             //turn on flip-2 
            $("#flip-2").val("on").slider( "refresh" );
        }
    });
    $("#flip-2").on("change", function(){
            if ($(this).val() == "off"){
             //turn on flip-1 
            $("#flip-1").val("on").slider( "refresh" );
        }
    });
});

这是 DEMO

更新：使用Omar的技术，为两个开关分配相同的类（在我的示例中为genderSelect）：

<div data-role="fieldcontain" id="menSelector">
    <label for="flip-1">Men</label>
    <select id="flip-1" name="flip-1" data-role="slider" data-mini="true" class="genderSelect">
        <option value="off">Off</option>
        <option selected="" value="on">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" class="genderSelect">
        <option value="off">Off</option>
        <option selected="" value="on">On</option>
    </select>
</div>

然后在该类上处理一个更改事件：

$(".genderSelect").on("change", function () {
    if ($(this).val() == "off") {
        $(".genderSelect").not($(this)).val("on").slider("refresh");
    }
});

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

2 个答案: