☰

여러 Div 내에서 체크박스 제목 추출(Javascript)

tag-icon • tag-icon javascript greasemonkey
여러 Div 내에서 체크박스 제목 추출(Javascript)

나는 체크박스에 체크 표시가 있는 모든 항목의 세련된 목록을 모으는 Greasemonkey 스크립트를 작성하려고 합니다. 확인란 목록은 매주 달라질 수 있으며 수백 개의 항목이 포함되어 있습니다. 찾고여기나는 클래스 이름으로 모든 요소를 ​​가져오면 이 작업을 수행할 수 있다는 것을 배웠습니다.getElementsByClassName('class_name')

그러나 요소 목록을 가져오는 데 실패했습니다. 요소 목록에서 값을 가져오는 것은 물론입니다.

다음은 사이트의 단순화된 버전입니다.

<div class="grid_8 pt5 displayInlineTable">
  <div id="ListSelector" style="width:450px;float:left; padding-right:10px;">
    <div id="testDiv" style="border: solid 1px; overflow: auto; width: 450px;
        height: 200px; background-color: white" align="left">
      <div id="divLB" class="hstmls" style="width: 600px;">
        <input name="Name1" type="checkbox" id="ID1" checked="checked" title="Title1" value="Value1" onclick="tA('thing');">
        <label id="ID1_lf" for="ID1">Title1</label>
        <br>
        <input name="Name2" type="checkbox" id="ID2" checked="checked" title="Title2" value="Value2" onclick="tA('thing');">
        <label id="ID2_lf" for="ID2">Title2</label>
        <br>
        <input name="Name3" type="checkbox" id="ID3" title="Title3" value="Value3" onclick="tA('thing');">
        <label id="ID3_lf" for="ID3">Title3</label>
        <br>
      </div>
    </div>
  </div>
</div>

JSFiddle에서 이 작업을 시도했지만(경고 상자에 체크된 값만 표시됨) 내 플레이 코드가 작동하지 않는 것 같습니다.

var checkedValue = null;
var inputElements = document.getElementsByClassName('grid_8 pt5 displayInlineTable');
for (var i = 0; inputElements[i]; ++i) {
  if (inputElements[i].checked) {
    alert(inputElements[i].value);
  }

궁극적으로 나는 선택된 각 항목을 선택하여 옆에 있는 텍스트 상자에 제목을 각각 개행 문자로 구분하여 기록할 계획입니다.

사이트(다른 테이블도 많기 때문에 이 특정 테이블 내)에 어떤 확인란이 있는지 확인하고 이를 반복하면서 적용 가능한 경우 제목 값만 가져오는 방법이 있습니까?

답변1

몇 가지 문제:

  1. 이것은 Stack Overflow의 주제에 대한 자세한 내용일 수 있습니다.
  2. 그것은 당신이 사용하는 방법이 아닙니다 getElementsByClassName; 한 번에 여러 수업을 진행하지 않습니다.
  3. 적절한CSS 선택기, 당신이 원하는querySelectorAll문서.
  4. grid_8pt5강력한 목표가 아닙니다 . 자주 바뀔 가능성이 높습니다.
    더 나은 CSS "경로"는 다음과 같습니다.
    .querySelectorAll ('.displayInlineTable input:checked')(아래 코드를 참조하세요.)
  5. 귀하의 웹 페이지가 AJAX를 통해 동적으로 체크박스를 로드할 수도 있습니다. 이것이 사실이라면 다음과 같은 AJAX 인식 방법을 사용해야 합니다.WaitForKeyElements.

그래서,정적 웹페이지의 경우:

다음과 같은 코드가 작동합니다.

var chkdItems = document.querySelectorAll (".displayInlineTable input:checked");

console.log ("Checked Items:\n--------------");

chkdItems.forEach ( (chkBox, J) => {
    console.log (J, ": ", chkBox.value);
} );

참조jsFiddle의 라이브 데모.

동적(AJAX) 웹페이지의 경우:

다음과 같은 완전한 Greasemonkey/Tampermonkey 스크립트가 작동합니다.

// ==UserScript==
// @name     _Simple Checkbox value demo
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements (".displayInlineTable input:checked", listChkbxValues);

function listChkbxValues (jNode) {
    if ( ! listChkbxValues.hdrPrinted) {
        listChkbxValues.hdrPrinted = true;
        console.log ( `
            Checked Items listed asynchronously, below:\n
            -------------------------------------------
        ` );
    }
    console.log ("Found value: ", jNode.val () );
}

일반적으로 좋은 생각인 jQuery도 활용한다는 점에 유의하세요.

관련 정보