我正在尝试创建一组单选按钮,其中有三种类型的单选按钮选项。 简单的单选按钮 2.输入框的单选按钮 3.搜索框的单选按钮。搜索框用于表格中的搜索文本。
我正在使用jQuery来获取所选单选按钮的结果:
console.clear();
function inputSelected() {
$("#result").html(function() {
var str = '';
$(":checked").each(function() {
str += $(this).val() + " ";
});
return str;
});
}
$(document).ready(function() {
$("input[type=radio]").click(inputSelected);
$("td.other").click(function() {
$(this).find('input[type=text]').focus();
});
$("td.other input[type=text]").keyup(function(e) {
var value = $(this).val().trim();
if (value.length <= 0) {
value = 'Other';
}
$(this).parent().siblings("input[type=radio]").val(value);
$(this).parent().siblings("label").html(value);
inputSelected();
})
});
&#13;
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<table width="200" border="0">
<tr>
<td><input name="a" type="radio" value="a" />A</td>
<td><input name="b" type="radio" value="b" />B</td>
<td><input name="c" type="radio" value="c" />C</td>
<td><input name="d" type="radio" value="d" />D</td>
</tr>
<tr>
<td class="other"><input type="radio" name="RadioGroup1" id="a28" value="Other" /><label for="a28">Other</label>
<div class="text">
<input type="text" id="other1" value="Other">
</div>
</td>
<td></td>
<td><input name="c" type="radio" value="search" />Search<input id='adjectiveSearch' type="search" name="search" placeholder="Search..."></td>
<td><input name="d" type="radio" value="d" />D</td>
</tr>
</table>
<div id="result">
</div>
&#13;
我尝试为搜索选项创建脚本,就像我用于其他搜索选项一样,但它无效。
我的问题是 - 对于这种情况,我需要做些什么改变来获得搜索框的结果?
注意:搜索框用于查找和我们在Table中找到的任何内容,它应该像其他单选按钮一样显示结果。
请告诉我是否有可能做出类似的事情?
答案 0 :(得分:0)
*(ptr.u8Mem1)
console.clear();
$(document).ready(function() {
var radioVal = '',
extraVal = '';
textInputs = $('.hasParent');
textInputs.prop('disabled', true);
function inputSelected() {
$('#result').html(radioVal+' '+extraVal);
}
$('.radioOption').on('click', function(evt){
radioVal = $(this).val();
inputSelected();
});
$('.radioMore').on('click', function(evt) {
extraVal = '';
textInputs.off().attr('disabled', true);
inputSelected();
if($(this).is('.hasChild')){
$(this)
.parent('td')
.find('.hasParent')
.attr('disabled', false)
.focus()
.on('input propertychange paste', function() {
extraVal = $(this).val();
inputSelected();
});
}else{
extraVal = $(this).val();
inputSelected();
}
});
});
答案 1 :(得分:0)
ConcurrentHashMap
&#13;
console.clear();
function inputSelected(val) {
$("#result").html(function() {
var str = '';
$(":checked").each(function(e) {
if (['a', 'b', 'c', 'd', 'a28', 'd2'].includes(this.id)){
str += $(this).val() + " ";
}
if (['radiosearch'].includes(this.id)){
str += $('#adjectiveSearch').val();
}
});
return str;
});
}
$(document).ready(function() {
$("input[type=radio]").click(inputSelected);
$("td.other").click(function() {
$(this).find('input[type=text]').focus();
});
$('#adjectiveSearch').on('input propertychange paste', function() {
inputSelected();
})
$("td.other input[type=text]").keyup(function(e) {
var value = $(this).val().trim();
if (value.length <= 0) {
value = 'Other';
}
$(this).parent().siblings("input[type=radio]").val(value);
$(this).parent().siblings("label").html(value);
inputSelected();
})
});
&#13;