获取用于在表

时间:2016-12-06 15:53:46

标签: javascript jquery html

我正在尝试创建一组单选按钮,其中有三种类型的单选按钮选项。 简单的单选按钮 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;
&#13;
&#13;

我尝试为搜索选项创建脚本,就像我用于其他搜索选项一样,但它无效。

我的问题是 - 对于这种情况,我需要做些什么改变来获得搜索框的结果?

注意:搜索框用于查找和我们在Table中找到的任何内容,它应该像其他单选按钮一样显示结果。

请告诉我是否有可能做出类似的事情?

2 个答案:

答案 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)

&#13;
&#13;
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;
&#13;
&#13;