Question

我正在尝试在单击复选框时将自定义搜索文本添加到Google搜索栏，并在删除时删除所述文本。我已经想出了如何在文本区域中添加/删除文本以及如何在搜索栏中放置自定义文本但我在查找如何用搜索栏中的文本替换搜索栏中的自定义文本时遇到了一些困难。单击这些复选框时的复选框。

HTML

<body>
    <div id="content">
        <div id="search">
<gcse:search></gcse:search>
            <div class="check_content">
            <div class="checkbox">
                <input type="checkbox" value="Value 1" id="checkbox1" name="checkbox" />
                <label for="checkbox1" ></label>
            </div>
                 <span>Value 1</span>
            </div>
             <div class="check_content">
            <div class="checkbox">
                <input type="checkbox" value="Value 2" id="checkbox2" name="checkbox" />
                <label for="checkbox2" ></label>
          </div>
                 <span>Value 1</span>
            </div>
            <div class="check_content">
            <div class="checkbox">
                <input type="checkbox" value="Value 3" id="checkbox3" name="checkbox" />
                <label for="checkbox3" ></label>

              </div>
                <span>Value 1</span>
            </div>

        </div>
        <textarea id="text"></textarea>
        </div>

<strong>Google Search Bar with Custom Text</strong>

<script>
  (function() {
    var cx = '014565979167738564771:fixr4qj_zfs';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();

  window.onload = function(){
      document.getElementById('gsc-i-id1').placeholder = 'This is custom text';
    };
</script>

它位于关闭正文标记的正上方。

将复选框中的文字附加到textarea的功能

$("input[name=checkbox]").change(function() { 
  updateAllChecked(); 
}); 

function updateAllChecked() { 
  $('#text').text(''); 
  $("input[name=checkbox]").each(function() { 
    if (this.checked) { 
      let old_text = $('#text').text() ? $('#text').text() + ', ' : ''; 
      $('#text').text(old_text + $(this).val()); 
    } 
  }) 
}

还包括JS小提琴 - https://jsfiddle.net/2pdkv6ph/1/

Answer 1

您的代码有几个问题。首先，$(this).val()不是复选框后面的范围的文本。您需要遍历DOM才能找到它。

$(this).parent('div').parent('div').find('span').text();

其次，您清除文本框然后尝试评估文本框中的文本的顺序是向后的（您无法清除它然后检查它以查看“旧”文本是什么，因为您只是清除它。）

更简单的方法是使用数组，选中该复选框后，将span的文本推送到数组。循环之后，将数组转换为逗号分隔的字符串，并将该值分配给文本框。

function updateAllChecked() {
   var myArray = [];
  $("input[name=checkbox]").each(function() {
    if (this.checked) {
    var spanText= $(this).parent('div').parent('div').find('span').text();
    myArray.push(spanText);
    }
  });
  $('#text').text(myArray.join(", "));
  //then assign to the Google text box?
  document.getElementById('gsc-i-id1').value = myArray.join(", ");
}

注意：我不完全清楚输入的目的是id =“text”与Google搜索输入有关。所以，我已经展示了如何将span文本分配给两者。

这是一个小提琴演示：https://jsfiddle.net/zephyr_hex/g97rzy2e/2/

Google搜索栏 - 通过输入复选框添加自定义搜索文本

1 个答案: