单击输入字段将背景颜色应用于父项，并取消选择初始选择的单选按钮
Click on input field applies a background colour on parent and deselect initial selected radio button
我在同一行有一个输入字段和两个单选按钮。当我点击一个单选按钮时，背景颜色会应用到它的父对象上。
我需要解决2个问题，如果可能的话：
-
当我点击输入字段时，应用活动类，就像我选择单选按钮时一样
-
如果我点击单选按钮，然后点击输入字段（或货币下拉列表），从初始单选按钮中删除选中的选项
Praveen Kumar解决了这两个问题（谢谢），但不幸的是，现在我遇到了另一个问题。我正在使用sumoselect，它将输入转换为货币，现在，如果我点击货币，它将根本不起作用。如果我复制货币并将其放在价格输入块之外，会很好地工作，所以一定有冲突，我找不到（我在更新这篇文章之前浪费了1天）。
我已经用sumoselect更新了jsfiddle和Praveen Kumar的修复程序，所以你可以看到的问题
$('.price input[type="radio"]').click(function () {
$('input:not(:checked)').parent('label').removeClass("active");
$('input:checked').parent('label').addClass("active");
});
$("#price, .SlectBox").focus(function () {
$("label").removeClass("active");
$(this).closest('label').addClass("active");
$("input:checked").prop("checked", false);
}).blur(function () {
if ($("#price").val().length == 0)
$(this).closest('label').removeClass("active");
});
/*!
* jquery.sumoselect - v2.1.0
* http://hemantnegi.github.io/jquery.sumoselect
*/
! function(e) {
"namespace sumo";
e.fn.SumoSelect = function(t) {
var l = e.extend({
placeholder: "Select Here",
csvDispCount: 3,
captionFormat: "{0} Selected",
floatWidth: 400,
forceCustomRendering: !1,
nativeOnDevice: ["Android", "BlackBerry", "iPhone", "iPad", "iPod", "Opera Mini", "IEMobile", "Silk"],
outputAsCSV: !1,
csvSepChar: ",",
okCancelInMulti: !1,
triggerChangeCombined: !0,
selectAll: !1,
selectAlltext: "Select All"
}, t),
s = this.each(function() {
var t = this;
!this.sumo && e(this).is("select") && (this.sumo = {
E: e(t),
is_multi: e(t).attr("multiple"),
select: "",
caption: "",
placeholder: "",
optDiv: "",
CaptionCont: "",
is_floating: !1,
is_opened: !1,
mob: !1,
Pstate: [],
createElems: function() {
var t = this;
return t.E.wrap('<div class="SumoSelect" tabindex="0">'), t.select = t.E.parent(), t.caption = e("<span></span>"), t.CaptionCont = e('<p class="CaptionCont"><i></i></p>').addClass("SlectBox").attr("style", t.E.attr("style")).prepend(t.caption), t.select.append(t.CaptionCont), t.E.attr("disabled") && t.select.addClass("disabled").removeAttr("tabindex"), l.outputAsCSV && t.is_multi && t.E.attr("name") && (t.select.append(e('<input class="HEMANT123" type="hidden" />').attr("name", t.E.attr("name")).val(t.getSelStr())), t.E.removeAttr("name")), t.isMobile() && !l.forceCustomRendering ? void t.setNativeMobile() : (t.E.hide(), t.optDiv = e('<div class="optWrapper">'), t.floatingList(), ul = e('<ul class="options">'), t.optDiv.append(ul), l.selectAll && t.selAll(), e(t.E.children("option")).each(function(l, i) {
i = e(i), t.createLi(i)
}), t.is_multi && t.multiSelelect(), t.select.append(t.optDiv), t.basicEvents(), void t.selAllState())
},
createLi: function(t, l) {
var i = this;
return t.attr("value") || t.attr("value", t.val()), li = e('<li data-val="' + t.val() + '"><label>' + t.text() + "</label></li>"), i.is_multi && li.prepend("<span><i></i></span>"), t[0].disabled && (li = li.addClass("disabled")), i.onOptClick(li), t[0].selected && li.addClass("selected"), t.attr("class") && li.addClass(t.attr("class")), ul = i.optDiv.children("ul.options"), "undefined" == typeof l ? ul.append(li) : ul.children("li").eq(l).before(li), li
},
getSelStr: function() {
return sopt = [], this.E.children("option:selected").each(function() {
sopt.push(e(this).val())
}), sopt.join(l.csvSepChar)
},
multiSelelect: function() {
var t = this;
t.optDiv.addClass("multiple"), t.okbtn = e('<p class="btnOk">OK</p>').click(function() {
l.triggerChangeCombined && (changed = !1, t.E.children("option:selected").length != t.Pstate.length ? changed = !0 : t.E.children("option:selected").each(function() {
t.Pstate.indexOf(e(this).val()) < 0 && (changed = !0)
}), changed && (t.E.trigger("change").trigger("click"), t.setText())), t.hideOpts()
}), t.cancelBtn = e('<p class="btnCancel">Cancel</p>').click(function() {
t._cnbtn(), t.hideOpts()
}), t.optDiv.append(e('<div class="MultiControls">').append(t.okbtn).append(t.cancelBtn))
},
_cnbtn: function() {
var e = this;
for (e.E.children("option:selected").each(function() {
this.selected = !1
}), e.optDiv.find("li.selected").removeClass("selected"), i = 0; i < e.Pstate.length; i++) e.E.children('option[value="' + e.Pstate[i] + '"]')[0].selected = !0, e.optDiv.find('li[data-val="' + e.Pstate[i] + '"]').addClass("selected");
e.selAllState()
},
selAll: function() {
var t = this;
t.is_multi && (t.chkAll = e("<i>"), t.selAll = e('<p class="select-all"><label>' + l.selectAlltext + "</label></p>").prepend(e("<span></span>").append(t.chkAll)), t.chkAll.on("click", function() {
t.selAll.toggleClass("selected"), t.optDiv.find("ul.options li").each(function(l, i) {
i = e(i), t.selAll.hasClass("selected") ? i.hasClass("selected") || i.trigger("click") : i.hasClass("selected") && i.trigger("click")
})
}), t.optDiv.prepend(t.selAll))
},
selAllState: function() {
var t = this;
if (l.selectAll) {
var i = 0,
s = 0;
t.optDiv.find("ul.options li").each(function(t, l) {
e(l).hasClass("selected") && i++, e(l).hasClass("disabled") || s++
}), i == s ? t.selAll.removeClass("partial").addClass("selected") : 0 == i ? t.selAll.removeClass("selected partial") : t.selAll.addClass("partial")
}
},
showOpts: function() {
var t = this;
t.E.attr("disabled") || (t.is_opened = !0, t.optDiv.addClass("open"), e(document).on("click.sumo", function(e) {
if (!t.select.is(e.target) && 0 === t.select.has(e.target).length) {
if (!t.is_opened) return;
t.hideOpts(), t.is_multi && l.okCancelInMulti && t._cnbtn()
}
}), t.is_floating && (H = t.optDiv.children("ul").outerHeight() + 2, t.is_multi && (H += parseInt(t.optDiv.css("padding-bottom"))), t.optDiv.css("height", H)), t.is_multi && (t.is_floating || l.okCancelInMulti) && (t.Pstate = [], t.E.children("option:selected").each(function() {
t.Pstate.push(e(this).val())
})))
},
hideOpts: function() {
var t = this;
t.is_opened = !1, t.optDiv.removeClass("open").find("ul li.sel").removeClass("sel"), e(document).off("click.sumo")
},
setOnOpen: function() {
var e = this,
t = e.optDiv.find("ul li").eq(e.E[0].selectedIndex);
t.addClass("sel"), e.showOpts()
},
nav: function(e) {
var t, l = this,
i = l.optDiv.find("ul li.sel");
if (l.is_opened && i.length) {
if (t = e ? i.prevAll("li:not(.disabled)") : i.nextAll("li:not(.disabled)"), !t.length) return;
i.removeClass("sel"), i = t.first().addClass("sel");
var s = l.optDiv.find("ul"),
n = s.scrollTop(),
o = i.position().top + n;
o >= n + s.height() - i.outerHeight() && s.scrollTop(o - s.height() + i.outerHeight()), n > o && s.scrollTop(o)
} else l.setOnOpen()
},
basicEvents: function() {
var t = this;
t.CaptionCont.click(function(e) {
t.E.trigger("click"), t.is_opened ? t.hideOpts() : t.showOpts(), e.stopPropagation()
}), t.select.on("keydown", function(e) {
switch (e.which) {
case 38:
t.nav(!0);
break;
case 40:
t.nav(!1);
break;
case 32:
case 13:
t.is_opened ? t.optDiv.find("ul li.sel").trigger("click") : t.setOnOpen();
break;
case 9:
case 27:
return t.is_multi && l.okCancelInMulti && t._cnbtn(), void t.hideOpts();
default:
return
}
e.preventDefault()
}), e(window).on("resize.sumo", function() {
t.floatingList()
})
},
onOptClick: function(t) {
var i = this;
t.click(function() {
var t = e(this);
t.hasClass("disabled") || (txt = "", i.is_multi ? (t.toggleClass("selected"), i.E.children('option[value="' + t.data("val") + '"]')[0].selected = t.hasClass("selected"), i.selAllState()) : (t.parent().find("li.selected").removeClass("selected"), t.toggleClass("selected"), i.E.val(t.attr("data-val"))), i.is_multi && l.triggerChangeCombined && (i.is_floating || l.okCancelInMulti) || (i.setText(), i.E.trigger("change").trigger("click")), i.is_multi || i.hideOpts())
})
},
setText: function() {
var t = this;
if (t.placeholder = "", t.is_multi) {
for (sels = t.E.children(":selected").not(":disabled"), i = 0; i < sels.length; i++) {
if (i >= l.csvDispCount && l.csvDispCount) {
t.placeholder = l.captionFormat.replace("{0}", sels.length);
break
}
t.placeholder += e(sels[i]).text() + ", "
}
t.placeholder = t.placeholder.replace(/,([^,]*)$/, "$1")
} else t.placeholder = t.E.children(":selected").not(":disabled").text();
return is_placeholder = !1, t.placeholder || (is_placeholder = !0, t.placeholder = t.E.attr("placeholder"), t.placeholder || (t.placeholder = t.E.children("option:disabled:selected").text())), t.placeholder = t.placeholder ? t.placeholder : l.placeholder, t.caption.text(t.placeholder), csvField = t.select.find("input.HEMANT123"), csvField.length && csvField.val(t.getSelStr()), is_placeholder ? t.caption.addClass("placeholder") : t.caption.removeClass("placeholder"), t.placeholder
},
isMobile: function() {
for (var e = navigator.userAgent || navigator.vendor || window.opera, t = 0; t < l.nativeOnDevice.length; t++)
if (e.toString().toLowerCase().indexOf(l.nativeOnDevice[t].toLowerCase()) > 0) return l.nativeOnDevice[t];
return !1
},
setNativeMobile: function() {
var e = this;
e.E.addClass("SelectClass"), e.mob = !0, e.E.change(function() {
e.setText()
})
},
floatingList: function() {
var t = this;
t.is_floating = e(window).width() <= l.floatWidth, t.optDiv.toggleClass("isFloating", t.is_floating), t.is_floating || t.optDiv.css("height", ""), t.optDiv.toggleClass("okCancelInMulti", l.okCancelInMulti && !t.is_floating)
},
vRange: function(e) {
var t = this;
if (opts = t.E.children("option"), opts.length <= e || 0 > e) throw "index out of bounds";
return t
},
toggSel: function(e, t) {
var l = this.vRange(t);
l.E.children("option")[t].disabled || (l.E.children("option")[t].selected = e, l.mob || l.optDiv.find("ul.options li").eq(t).toggleClass("selected", e), l.setText())
},
toggDis: function(e, t) {
var l = this.vRange(t);
l.E.children("option")[t].disabled = e, e && (l.E.children("option")[t].selected = !1), l.mob || l.optDiv.find("ul.options li").eq(t).toggleClass("disabled", e).removeClass("selected"), l.setText()
},
toggSumo: function(e) {
var t = this;
return t.enabled = e, t.select.toggleClass("disabled", e), e ? (t.E.attr("disabled", "disabled"), t.select.removeAttr("tabindex")) : (t.E.removeAttr("disabled"), t.select.attr("tabindex", "0")), t
},
toggSelAll: function(t) {
var i = this;
i.E.find("option").each(function(l, s) {
i.E.find("option")[e(this).index()].disabled || (i.E.find("option")[e(this).index()].selected = t, i.mob || i.optDiv.find("ul.options li").eq(e(this).index()).toggleClass("selected", t), i.setText())
}), !i.mob && l.selectAll && i.selAll.removeClass("partial").toggleClass("selected", t)
},
reload: function() {
var t = this.unload();
return e(t).SumoSelect(l)
},
unload: function() {
var e = this;
return e.select.before(e.E), e.E.show(), l.outputAsCSV && e.is_multi && e.select.find("input.HEMANT123").length && e.E.attr("name", e.select.find("input.HEMANT123").attr("name")), e.select.remove(), delete t.sumo, t
},
add: function(l, i, s) {
if ("undefined" == typeof l) throw "No value to add";
var n = this;
if (opts = n.E.children("option"), "number" == typeof i && (s = i, i = l), "undefined" == typeof i && (i = l), opt = e("<option></option>").val(l).html(i), opts.length < s) throw "index out of bounds";
return "undefined" == typeof s || opts.length == s ? (n.E.append(opt), n.mob || n.createLi(opt)) : (opts.eq(s).before(opt), n.mob || n.createLi(opt, s)), t
},
remove: function(e) {
var t = this.vRange(e);
t.E.children("option").eq(e).remove(), t.mob || t.optDiv.find("ul.options li").eq(e).remove(), t.setText()
},
selectItem: function(e) {
this.toggSel(!0, e)
},
unSelectItem: function(e) {
this.toggSel(!1, e)
},
selectAll: function() {
this.toggSelAll(!0)
},
unSelectAll: function() {
this.toggSelAll(!1)
},
disableItem: function(e) {
this.toggDis(!0, e)
},
enableItem: function(e) {
this.toggDis(!1, e)
},
enabled: !0,
enable: function() {
return this.toggSumo(!1)
},
disable: function() {
return this.toggSumo(!0)
},
init: function() {
var e = this;
return e.createElems(), e.setText(), e
}
}, t.sumo.init())
});
return 1 == s.length ? s[0] : s
}
}(jQuery);
$(function(){
$('select').SumoSelect({
nativeOnDevice: ['Android', 'BlackBerry', 'iPhone', 'iPad', 'iPod', 'Opera Mini', 'IEMobile', 'Silk'],
});
$('.selector > #select_1').SumoSelect();
});.price label {
background-color: #DDD;
border: 1px solid #DDD;
color: #fff;
display: inline-block;
margin-top: 20px;
padding: 5px;
}
.active {
background-color: #555 !important;
}
.SlectBox { box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;width: 100%; padding: 6px 5px 4px;}
.SumoSelect { position: relative;outline:none;color:#666;}
.header .SumoSelect {width: 100%;}
.add-item .price .SumoSelect {float: right;}
.add-item .price .SumoSelect label {}
/*this is applied on that hidden select. DO NOT USE display:none; or visiblity:hidden; and Do not override any of these properties. */
.SelectClass { position: absolute; top: 0px; left: 0px; right: 0px; height: 100%; width: 100%; border: none; z-index: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }
.SumoSelect > .optWrapper > .options > li label, .SumoSelect > .CaptionCont { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
.SumoSelect:focus > .CaptionCont,.SumoSelect:hover > .CaptionCont {border-color: #7799D0;}
.SumoSelect > .CaptionCont { position: relative; border: 1px solid #A4A4A4; min-height: 14px; background-color: #fff;}
.search-options .SumoSelect > .CaptionCont {border: 0px;}
.SumoSelect > .CaptionCont > span { display: block; padding-right: 30px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;cursor:default;}
/*placeholder style*/
.SumoSelect > .CaptionCont > span.placeholder { color: #ccc; font-style: italic; }
.SumoSelect > .CaptionCont > label { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 30px;}
.SumoSelect > .CaptionCont > i { opacity:0.5; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=');background-position: center center; width: 16px; height: 16px; display: block; position: absolute; top: 0px; right: 10px; bottom: 0px; margin: auto;background-repeat: no-repeat;}
.SumoSelect > .optWrapper { width: 100%; position: absolute; left: 0; opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -webkit-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -moz-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -ms-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -o-transition: opacity 200ms ease-out, top 200ms ease-out, visibility 200ms ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: -100; background-color: #fff; border: 1px solid #ddd; overflow: hidden;}
.search-options .SumoSelect > .optWrapper {border:0px;}
.SumoSelect > .optWrapper.open { top: 100%; visibility: visible; opacity: 1; z-index: 1000;margin-top: 2px; }
.SumoSelect > .optWrapper > .options { list-style: none; display: block; padding: 0px; margin: 0px; overflow: auto; /*Set the height of pop up here (only for desktop mode)*/max-height: 250px;/*height*/ }
.search-options .SumoSelect > .optWrapper > .options {height: 183px;}
.SumoSelect > .optWrapper.isFloating > .options {max-height: 100%;}
.SumoSelect > .optWrapper > .options > li { margin: 0;padding: 6px 6px; border-bottom: 1px solid #F3F3F3; position: relative; }
.SumoSelect > .optWrapper > .options > li:last-child { border-bottom: none; }
.SumoSelect > .optWrapper > .options > li:hover { background-color: #E4E4E4; }
.SumoSelect > .optWrapper > .options > li.sel{background-color: #a1c0e4;}
.SumoSelect > .optWrapper > .options > li label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block;cursor: pointer;padding: 0;margin: 0;}
.SumoSelect > .optWrapper > .options > li span { display: none; }
/*Floating styles*/
.SumoSelect > .optWrapper.isFloating { position: fixed; top: 0px; left: 0px; right: 0px; width: 90%; bottom: 0px; margin: auto; max-height: 90%; }
/*styling for optgroups*/
.SumoSelect > .optWrapper > .options > li.optGroup { padding-left: 5px; text-decoration: underline; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="price section-content">
<label>
<input id="price" type="text" value="" name="price">
<select id="currency" name="currency">
<option value="EUR">€</option>
<option selected="selected" value="USD">$</option>
</select>
<span>Price</span>
</label>
<label>
<input id="exchange" type="radio" value="2" name="price-option">
<span>Exchange</span>
</label>
<label>
<input id="donate" type="radio" value="1" name="price-option">
<span>Donate</span>
</label>
</div>
<select id="currency" name="currency">
<option value="EUR">€</option>
<option selected="selected" value="USD">$</option>
</select>要取消选择输入，可以使用：
$("input:checked").prop("checked", false);
对于文本<input />，可以使用以下代码：
$("#price").focus(function () {
$(this).closest('label').addClass("active");
$("input:checked").prop("checked", false);
}).blur(function () {
$(this).closest('label').removeClass("active");
});
在input的focus中给出。
$('.price input[type="radio"]').click(function () {
$('input:not(:checked)').parent('label').removeClass("active");
$('input:checked').parent('label').addClass("active");
});
$("#price, #currency").focus(function () {
$("label").removeClass("active");
$(this).closest('label').addClass("active");
$("input:checked").prop("checked", false);
}).blur(function () {
if ($("#price").val().length == 0)
$(this).closest('label').removeClass("active");
});.price label {
background-color: #DDD;
border: 1px solid #DDD;
color: #fff;
display: inline-block;
margin-top: 20px;
padding: 5px;
}
.active {
background-color: #555 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="price section-content">
<label>
<input id="price" type="text" value="" name="price">
<select id="currency" name="currency">
<option value="EUR">€</option>
<option selected="selected" value="USD">$</option>
</select>
<span>Price</span>
</label>
<label>
<input id="exchange" type="radio" value="2" name="price-option">
<span>Exchange</span>
</label>
<label>
<input id="donate" type="radio" value="1" name="price-option">
<span>Donate</span>
</label>
</div>相关文章：
- 通过在d3中单击来选择/取消选择
- 复选框选择/取消选择触发器第一次工作，但在随后的尝试中失败
- 选择/取消选择复选框，该复选框未按预期使用.coneast('table'）.find('tbo
- 在angular.js中选择取消选择树结构
- Javascript函数用于选择/取消选中radgrid标头模板中的所有复选框
- 一个变量，多个复选框选择/取消选择 jQuery
- 基于下拉选择的单选选择/取消选择
- 选择/取消选择花式树插件上所有具有相同ID的节点
- 选择2 取消选择所有值
- 使用 JQuery 多次选择取消选中复选框
- jQuery:需要知道在变更事件中选择/取消选择了哪个选项
- 带有选择/取消选择和汇总选项的表格
- 在按钮上切换类(选择/取消选择）
- 关闭浏览器选项卡时，如何在确认框中默认选择“取消”
- jqxTreeGrid如果我单击一行中的特定单元格，则禁用对该行的选择/取消选择
- 如何使用 JavaScript/jQuery 选择/取消选中复选框
- 即使用户选择“取消”，我如何保留FileDialog输入值?(ASP.Net/Javascript）
- 使用JQuery取消选择/取消聚集输入字段
- 如何将JavaScript应用于引导程序btn组以选择/取消选择子按钮元素
- 如何选择/取消选择所有克隆节点
