j查询使用radiio输入名称的单选按钮不起作用



希望一切顺利!!

当我单击单选按钮div 时,我需要在div 周围显示边框,但问题是名称是这样显示的:- 输入[名称="属性[门选项] 你可以看到门选项正在处理一个空格。据我了解,主要问题是空间,这就是我的jquery无法正常工作的原因。

我没有为此使用类,因为所有单选按钮的工作方式都不同且动态。

请看

<input type="radio" class="rb_677900_299393" name="properties[DOOR OPTION]" value="Pre-Hung" data-option_value_key="1">

请检查我的截图

$(function() {
$('.bold_option_value label span.bold_option_value_element input[type=radio]').on('change', function() {
if ($('input[name="properties[Size]"]:checked').length > 0) {
$('.bold_option_value_title').removeClass("intro");
$(this).parent().siblings('.bold_option_value_title').addClass("intro");
}
});
$('body').on('live','.bold_option_value_title',function(){
if ($('input[name="properties[DOOR OPTION]"]:checked').length > 0) {
$('.bold_option_value_title').removeClass("intro");
$(this).parent().siblings('.bold_option_value_title').addClass("intro");
}
});
});

检查这个例子。这是要找的吗?

.HTML

<div>
<div>
<b>RADIO 1 :</b>
<div class="dv1"><label><input type="radio" name="properties[DOOR OPTION]"/>ABC</label></div>
<div class="dv1"><label><input type="radio" name="properties[DOOR OPTION]"/>DEF</label></div>
</div>
<div>
<b>RADIO 2 :</b>
<div class="dv1"><label><input type="radio" name="properties[WHATEVER]"/>GHI</label></div>
<div class="dv1"><label><input type="radio" name="properties[WHATEVER]"/>JKL</label></div>
</div>
<div>
<b>RADIO 3 :</b>
<div class="dv1"><label><input type="radio" name="properties[TEST SPACE]"/>MNO</label></div>
<div class="dv1"><label><input type="radio" name="properties[TEST SPACE]"/>PQR</label></div>
<div class="dv1"><label><input type="radio" name="properties[TEST SPACE]"/>STU</label></div>
</div>
</div>  

JAVASCRIPT

$("input[type='radio']").on("change",function(){
var target = $(this).closest("div"); // Find the closest div with this input.
target.addClass("active") // Add class active (border)
.parent("div").find("div") // Find all the others div within parents div
.not(target).removeClass("active"); // Remove others div with class active except the target
});

JSFiddle 示例 : http://jsfiddle.net/synz/ajkz8u3o/

最新更新