我的 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";
}
};
最佳答案
将 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");
}
});
});
关于javascript - Jquery 移动翻转切换从两个按钮中选择至少一个。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26511753/