jquery默認選中輸入時觸發點擊事件-有解無憂

我只想按照排列的邏輯默認顯示“Hello 1”和“Hello 2”。

$(".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>

我嘗試通過默認添加“隱藏（）”所有 div 元素，然后在檢查輸入時觸發...

做錯了什么？

uj5u.com熱心網友回復：

你需要使用 $(".hS input:checked").trigger("click");

問題是.is(":checked")回傳一個真/假值，所以你不能使用.trigger()after；

演示

顯示代碼片段

$(".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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373279.html

標籤：查询

上一篇：電話號碼屏蔽（無插件）

下一篇：倒計時開始日期時間，然后倒計時停止日期時間（jQuery）