使用radiio输入名称的单选按钮的jQuery不起作用

时间:2018-08-27 06:54:50

标签: jquery

希望一切都好!

当我单击单选按钮div时,我需要在div周围显示边框,但问题是名称显示如下:-input [name =“ properties [DOOR OPTION]你可以看到DOOR OPTION是处理一个空格据我了解,主要问题是空间,这就是为什么我的jquery无法正常工作的原因。

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

请参阅

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

Please check my screenshot

$(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");
      }
    });
  });

1 个答案:

答案 0 :(得分:0)

检查此示例。这是要找的东西吗?

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/