I want to display only, "Hello 1" and "Hello 2" by default following the logic of the arrangement.

$(".hS .showDiv").hide();

$(document).on("change click",".hS input",function(){
    var div = $(this).closest(".hS").find(".showDiv");
    
    if($(this).val()==1){div.show();}else{div.hide();}  
});

$(".hS input").is(":checked").trigger("click"); //not working

.hS{
list-style:none;
padding:20px;
border:1px solid red;
width:100px;
display:inline-block;
vertical-align:top;
}
.hS input{
display:block;
}
.showDiv{
background:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<li class='hS'>
<input type='radio' name="a" value="1"  checked />
<div class='showDiv'>Hello 1</div>
<input type='radio' name="a" value="2"  />
<input type='radio' name="a" value="3" />
</li>


<li class='hS'>
<input type='radio' name="b" value="1"  checked />
<div class='showDiv'>Hello 2</div>
<input type='radio' name="b" value="2"  />
<input type='radio' name="b" value="3" />
</li>

<li class='hS'>
<input type='radio' name="c" value="1"   />
<div class='showDiv'>Hello 3</div>
<input type='radio' name="c" value="2" checked />
<input type='radio' name="c" value="3" />
</li>

<li class='hS'>
<input type='radio' name="d" value="1"   />
<div class='showDiv'>Hello 4</div>
<input type='radio' name="d" value="2"  />
<input type='radio' name="d" value="3" checked />
</li>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I tried by adding a ´hide()´ all the divs elements by default, then trigger when the input is checked...

What am doing wrong?

CodePudding user response：

You need to use $(".hS input:checked").trigger("click");

Problem is that .is(":checked") returns a true/false value, so you can't use .trigger() after;

Demo

Show code snippet

$(".hS .showDiv").hide();

$(document).on("change click", ".hS input", function() {
  var div = $(this).closest(".hS").find(".showDiv");

  if ($(this).val() == 1) {
    div.show();
  } else {
    div.hide();
  }
});

$(".hS input:checked").trigger("click"); //not working

.hS {
  list-style: none;
  padding: 20px;
  border: 1px solid red;
  width: 100px;
}

.hS input {
  display: block;
}

.showDiv {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<li class='hS'>
  <input type='radio' name="a" value="1" checked />
  <div class='showDiv'>Hello 1</div>
  <input type='radio' name="a" value="2" />
  <input type='radio' name="a" value="3" />
</li>


<li class='hS'>
  <input type='radio' name="b" value="1" checked />
  <div class='showDiv'>Hello 2</div>
  <input type='radio' name="b" value="2" />
  <input type='radio' name="b" value="3" />
</li>

<li class='hS'>
  <input type='radio' name="c" value="1" />
  <div class='showDiv'>Hello 3</div>
  <input type='radio' name="c" value="2" checked />
  <input type='radio' name="c" value="3" />
</li>

<li class='hS'>
  <input type='radio' name="d" value="1" />
  <div class='showDiv'>Hello 4</div>
  <input type='radio' name="d" value="2" />
  <input type='radio' name="d" value="3" checked />
</li>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>