我有以下代码,我想在<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>
答案 0 :(得分:1)
试试这个:
.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;
答案 1 :(得分:0)
这样的事情可行。如果我正确回答您的问题,您需要将这些类添加到单选按钮。
$('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')
}
});
答案 2 :(得分:0)
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">