Question

我有以下代码，我想在<span class " ui-message ui-state-highlight">添加/删除类到选中的单选按钮以突出显示选中的行。我该怎么做呢？

这是我的html和JS下面的

$(document).ready(function(){
        $('#loan_origination_application input').on('change', function() {
           $('input[name=address]:checked', '#loan_origination_application').addClass("ui-message ui-state-highlight"); 
           alert($('input[name=address]:checked', '#loan_origination_application').val()); 
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional address-b">
    <label class="radio_buttons optional control-label">Your addresses</label>
        <span class="radio ui-message ui-state-highlight">
        <br />
    <label for="user_address1 ">
    <input class="radio_buttons optional" id="user_address1" name="address" type="radio" value="addres1" checked><strong>Sally Smith</strong> 3  Plaza, Luiville, Az 932973, United States <a href="#">Edit</a>
    <br />
    </label>
                    </span>
                    <span class="radio">
                        <label for="user_address2">
                            <input class="radio_buttons optional" id="user_address2" name="address" type="radio" value="address2"><strong>Sally Smith</strong> 123 Smith St, Boyton Beach, FL 08801, United States <a href="#">Edit</a>
                        </label>
                    </span>
    
                    <p class="help-block"><a href="#"> Add new address</a></p>
                </div>

Answer 1

试试这个：

＆＃13;

.ui-message.ui-state-highlight {
  background: lightblue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional address-b">
  <label class="radio_buttons optional control-label">Your addresses</label>
  <span class="radio">
                    <label for="user_address1 ">
                        <input class="radio_buttons optional" id="user_address1" name="address" type="radio" value="addres1"><strong>Sally Smith</strong> 3  Plaza, Luiville, Az 932973, United States <a href="#">Edit</a>
                    </label>
                </span>
  <span class="radio">
                    <label for="user_address2">
                        <input class="radio_buttons optional" id="user_address2" name="address" type="radio" value="address2"><strong>Sally Smith</strong> 123 Smith St, Boyton Beach, FL 08801, United States <a href="#">Edit</a>
                    </label>
                </span>

  <p class="help-block"><a href="#"> Add new address</a></p>
</div>

＆＃13;

head -`wc -l file | awk '{print(int(0.95*$1))}'` file | tail -n 1

＆＃13;

Answer 2

这样的事情可行。如果我正确回答您的问题，您需要将这些类添加到单选按钮。

$('input[name="address"]').on('change', function() {
  if ($(this).is(':checked')) {
     $(this).addClass('ui-message ui-state-highlight')
  } else {
     $(this).removeClass('ui-message ui-state-highlight')
  }
});

Answer 3

Sean有一个很好的解决方案，可以通过JS添加类。但您可以使用CSS中的:checked伪选择器来定位与输入关联的已检查输入元素或标签。

label input:checked {
  opacity: .25;
}

input:checked + label {
  color: red;
}

<label>
  <input type="radio" name="radio"> text
</label>
<label>
  <input type="radio" name="radio"> text
</label>
<label>
  <input type="radio" name="radio"> text
</label>

<br><br>

<input type="radio" name="radio2" id="radio2-1"> <label for="radio2-1">text</label>
<input type="radio" name="radio2" id="radio2-2"> <label for="radio2-2">text</label>
<input type="radio" name="radio2" id="radio2-3"> <label for="radio2-3">text</label>

如果你想使用JS / jQuery，设置一个change事件监听器，然后遍历输入并更新类。

var $inputs = $('input[name="address"]');

$inputs.on('change',function() {
  $inputs.each(function() {
    if ($(this).is(':checked')) {
     $(this).addClass('ui-message ui-state-highlight')
    } else {
     $(this).removeClass('ui-message ui-state-highlight')
    }
  })
})

.ui-message.ui-state-highlight {
  transform: translateY(5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="address" type="radio"> <input name="address" type="radio"> <input name="address" type="radio" value="foo">

Jquery：如何突出显示已检查的无线电块

3 个答案: