2

I have the following setup where a custom checkmark is added to style the radio buttons. but it also adds that checkmark to the text type inputs.

var changed =function(){

    Array.from(document.querySelectorAll("table")).forEach((element,index) =>
    {
      Array.from(element.querySelectorAll("input")).forEach((myinp,index) =>
      {

              if(myinp.checked==true){
                   myinp.parentNode.parentNode.classList.add("active");
              }else{
                  myinp.parentNode.parentNode.classList.remove("active");
              }

      });
    });  
}//changed function ends

Array.from(document.querySelectorAll("table")).forEach((element,index) =>
{
    Array.from(element.querySelectorAll("input")).forEach((myinp,index) =>
    {
       var checkmark = document.createElement("span");
       checkmark.classList.add("checkmark");
       myinp.parentNode.appendChild(checkmark);
       myinp.addEventListener("change", changed);
    });
});
table tbody tr td:first-child{
position:relative;
}
.confirmit-table tbody tr input[type='radio'][type='checkbox']{
visibility:hidden
}


 /*Create a custom checkbox */
.checkmark,.dotmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25px;
  background-color: #eee;
}
input[type='text']{
  width:20px;
}
/* On mouse-over, add a grey background color */
table tbody tr:hover input ~ .checkmark {
  background-color: #ccc;
}
/* On mouse-over, add a grey background color */
table tbody tr:hover input ~ .dotmark {
  background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
table tbody tr input:checked ~ .checkmark {
  background-color:#11448d;
}
/* When the checkbox is checked, add a blue background */
table tbody tr input:checked ~ .dotmark  {
  background-color:#11448d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after,.dotmark:after  {
  content: "";
  position: absolute;
  display: none;
  top:50%;
}

/* Show the checkmark when checked */
table tbody tr input:checked ~ .checkmark:after{
  display: block;
}

/* Show the checkmark when checked */
table tbody tr input:checked ~ .dotmark:after{
  display: block;
}
    
    
/* Style the checkmark/indicator */
table tbody tr .checkmark:after {
  left: 9px;
  top: 30%;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
table tbody tr .dotmark:after {
    left: 8px;
    top: 8px;
    width: 10px;
    height: 10px;
    background-color:#fff;  
}

/*Custom check boxes/radio buttons*/
table label {
  width:350px;
  display:block;
  margin:0px;
  padding:5px 10px;
} 
table label:hover{
margin:0px;
}


  
.confirmit-table tbody tr{
  background-color:#f5f5f5;
}
.active{
  background:#6081b9 !important;
}
<table>
  <tr>
    <td>
      <input id='txt1' type='text' name='test'>
     
    </td>
    <td>
      <label for='txt1'>Text Input1</label> 
    </td> 
  </tr>
  <tr>
    <td>
      <input id='txt2' type='text' name='test'>
     
    </td>
    <td>
      <label for='txt2'>Text input 2</label> 
    </td> 
  </tr>
  <tr>
    <td>
      <input id='inp1' type='radio' name='test'>
     
    </td>
    <td>
      <label for='inp1'>Radio button 1</label> 
    </td> 
  </tr>
  <tr>
    <td>
      <input id='inp2' type='radio' name='test'>
      
    </td>
    <td>
      <label for='inp2'>Radio button 2</label> 
    </td> 
  </tr>
  <tr>
    <td>
      <input id='inp3' type='radio' name='test'>
    </td>
    <td>
      <label for='inp3'>Radio button 3</label> 
    </td> 
  </tr>
</table>

I have used the javascript to style(i.e custom checkmark element added next to radio type inputs) the radio buttons, but i do not want this styling to apply text type inputs in javascript only.

How do I exclude the text type inputs from querySelectorAll("input")

1

2 Answers 2

5
console.log(document.querySelectorAll('input:not([type=text])'));
Sign up to request clarification or add additional context in comments.

4 Comments

Actually OP only wants radio buttons.
that worked, @connexo i just wants to exclude the text inputs. i have same styling for checkboxes also. thank you so much.
This is not a good solutiion. What about input type=date, input type=password, input type=email etc etc? Don't use excluding selectors if you don't have to. You are bound to create problems in the future, even if currently your website doesn't have any of those inputs. Instead, use element.querySelectorAll("input[type=radio], input[type=checkbox]").
Won't work for input without a type attribute or with an invalid one (even though their type IDL will be "text". jsfiddle.net/nfogLqe1
4

Change

element.querySelectorAll("input")

to

element.querySelectorAll("input[type=radio]")

to only get the radio buttons.

If you also want checkboxes:

element.querySelectorAll("input[type=radio], input[type=checkbox]")

To exclude a certain type by an attribute present, you can use

element.querySelectorAll("input:not([type=text])")

Note that text is also the default type, so the attribute might be omitted. To make sure, you could convert the NodeList to an Array and apply a filter:

[...element.querySelectorAll('input')].filter(el -> el.type !== 'text')

In your case, the safest bet probably is a positive filter approach:

[...element.querySelectorAll('input')].filter(el -> ['checkbox', 'radio'].includes(el.type))

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.