Javascript設置嵌套div中類和隱藏輸入的值

我有一個span類「複選框」和一個與隱藏輸入字段相關聯的屬性「value」，兩者都包含在嵌套div中。Javascript設置嵌套div中類和隱藏輸入的值

默認情況下，複選框未選中，但我希望將span類更改爲「checkbox active」，將輸入值更改爲「1」，以便檢查並呈現它以反映該更改。

此代碼由WordPress插件生成，沒有ID。

什麼是設置這兩個屬性的最佳方法？

<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator=""> 
    <div class="cfs_true_false ready"> 
     <span class="checkbox"></span> 
     <span>Is this a news item?</span> 
     <input type="hidden" name="cfs[input][6][value]" class="true_false" value="0"> 
    </div> 
</div>

來源

2015-11-24 mrickan

有多少這樣的結構在頁面上有哪幾種？你想改變所有這些嗎？ – Abhitalks

使用類屬性。 –

頁面上只有一種這種類型的構造，因此它僅限於一個實例。 – mrickan

根據你requirement.Why不要你這樣設置？下面

$(document).ready(myfunc); 

function myfunc() 
{ 
$('.checkbox').addClass('checked'); 
    $('.true_false').val('1'); 


} 

if($('.checkbox').hasClass('checked')) 
{ 
alert($('.true_false').val()); 
}

點擊演示看到，值1是越來越設置和檢查類是越來越設置。 您可以點擊按鈕或選中複選框來完成此操作。

點擊Here

來源

2015-11-24 05:59:09

這實際上是一個非常簡單的解決方案，並將在我的上下文中完美工作。對於WP，請注意，您可以使用jQuery noConflict包裝器。我最初期望使用querySelector或DOM的解決方案，所以如果有人感到雄心勃勃，我相信這也會有所幫助。 Per @Ajay是這條路線使用該類作爲參考點的最佳選擇？ – mrickan

@mrickan是的只是爲了更安全的一面，你可以使用$ .noConflict（）;如果你喜歡 –

試試這個：

也爲演示目的，我一直輸入作爲text，而不是hidden。

Fiddle

(function(){ 
 
\t $(".checkbox").on("click",function(){ 
 
    \t $(this).toggleClass("checked"); 
 
     var val = 0; 
 
     val = $(this).hasClass("checked")?1:0; 
 
     $(this).parent().find(".true_false").val(val); 
 
    }); 
 
})()

.checked{ 
 
    background: blue!important; 
 
} 
 

 
.checkbox{ 
 
    width:20px; 
 
    background:#eee; 
 
    padding:5px; 
 
    border:1px solid black 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator=""> 
 
    <div class="cfs_true_false ready"> 
 
     <span class="checkbox"></span> 
 
     <span>Is this a news item?</span> 
 
     <input type="text" name="cfs[input][6][value]" class="true_false" value="0"> 
 
    </div> 
 
</div>

來源

2015-11-24 05:52:19 Rajesh

<div class="field field-news_item" data-type="true_false" data-name="news_item" data-validator=""> 
    <div class="cfs_true_false ready"> 
     <span class="checkbox"></span> 
     <span>Is this a news item?</span> 
     <input type="checkbox" id="checkbox" /> 
     <input type="text" name="cfs[input][6][value]" class="true_false" value="0"> 
    </div> 
</div> 
$(document).ready(function(){ 
$('#checkbox').change(function(){ 
var checkboxValue = $(this).is(':checked'); 
if(checkboxValue == true){ 
$(".true_false").val('1'); 
alert('1'); 
    }else{ 
    $(".true_false").val('0'); 
    alert('0'); 
    } 
    }); 
});

來源

2015-11-24 07:45:21 ASHU

這兩個我已添加僅用於測試，當您單擊複選框時該值已被更改 – ASHU

Javascript設置嵌套div中類和隱藏輸入的值

回答

相關問題